React Native - State

一个组件被两种数据控制：props和state。props由其父类设置，并且在这个组件的生命周期内，他们都是被锁定的。对于要改变的数据，我们必须要使用state。

一般情况下，你应该在构造函数中初始化state，然后当你想要改变它的时候，调用setState。

举例来说，我们想要做一个text，这个text每时每刻都在闪烁，在创建闪烁组件的时候把text设置一次，所以text本身就是一个prop，“text目前是开启的还是关闭的”随着时间而改变，这个数据应保存在state中。

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

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {showText: true};
        
        // Toggle the state every second
        setInterval(() => {
            this.setState({ showText: !this.state.showText });
        }, 1000);
    }
    
    render() {
        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);

在实际应用中，你可能不会用一个计时器来设置state。你也许会在你从服务器获取到数据，或从用户输入获取数据时设置state；您还可以使用像Redux的state容器来控制你的数据流，在这种情况下，你可以使用Redux来修改你的state，而不是直接调用setState。

State的作用跟在React中一样，想要掌握更多关于state的详细信息，你可以看看React.Component API。

在这一点上，你可能会恼火，我们的大多数例子使用至今都是默认的无聊的黑色text。为了让界面变得更漂亮，你将不得不学习Style。