基础篇_State [steɪt] 状态

我们使用两种数据来控制一个组件：props 和 state。props是在 父组件 中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用 state。

一般来说，你需要在 constructor ( [kənˈstrʌktə(r)] 构造函数 )中初始化 state（译注：这是ES6的写法，早期的很多ES5的例子使用的是 getInitialState 方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用 setState 方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个 prop 。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到 state 中。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

class Blink extends Component {
    
    constructor(props) {
        super(props);
        this.state = {showText: true};
        // 每1000毫秒对 showText: ture 状态 做一次取反操作
        setInterval(() => {
                    this.setState(previousState => {
                                  return {showText: !previousState.showText };
                                  });
                    
                    },1000);
    }
    
    
    render() {
    
        // 根据当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.text: ' ';
        
        return (
                <Text>{display}</Text>
                );
    }
  
    
}

class BlinkApp extends Component {

    render() {
    
        return (
                <View>
                <Blink text='I love to blink' />
                <Blink text='Yes blinking is so great' />
                <Blink text='Why did they ever take this out of HTML' />
                <Blink text='Look at me look at me look at me' />
                </View>
                );
    }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如 Redux 来统一管理数据流（译注：但我们不建议新手过早去学习redux）。

State 的工作原理和 React.js 完全一致，所以对于处理 state 的一些更深入的细节，你可以参阅React.Component API。