react - 8. state

访问量: 307

参考:https://facebook.github.io/react-native/docs/state

在React native中, 一次赋值之后就不变的,用props ,典型例子: <Book name="三体"/> 这里的name是固定不变的

赋值之后, 会发生变化的变量, 用state . 典型的例子:

某个页面需要从远程读取数据。 (例如变量名字叫 remote_book_name)

1. 页面刚刚打开时 ,对应的内容是空白的。 remote_book_name = ''

2. 页面发起http request

3. 该页面获得了远程的结果, 把结果赋值给 remote_book_name = "决斗在网络"

可以看到,上面例子中,这个变量是随着程序的状态发生变化的,所以是个典型的 state.

下面是一个例子:

(screens/StateDemo.js) 

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'

export default class MyFavorateBooks extends Component{
  constructor(props){
    super(props)
    this.state = {
      isToChange: false
    }
  }
  // 由于 state变量的每次发生变化,都是跟之前的有一定的关系的, 所以这里的函数有一个参数: previousState
  change = () => {
    this.setState(previousState => (
      {
        isToChange: !previousState.isToChange
      }
    ))
  }

  // 为了演示方便,我没有把下面的代码做重构, 直接用最原始的方式来表现了。
  render(){
    if(!this.state.isToChange){
      return(
        <View>
          <Text>早上起来, 拥抱太阳 </Text>
          <Button
            title="看下一句歌词"
            onPress={this.change}
            />
        </View>
      )
    }
    else{
      return(
        <View>
          <Text>让身体充满, 灿烂的阳光! </Text>
          <Button
            title="看前一句歌词"
            onPress={this.change}
            />
        </View>
      )
    }
  }
}

从Home.js页面加上入口,在App.js文件中加上路由之后, 就可以打开这个页面了

点击按钮,就可以看到页面的文字发生了变化

订阅/RSS Feed

Subscribe

分类/category