React Native - 03 - 状态

控制组件的数据有两种类型：属性和状态。属性由父母设置，在组件的整个生命周期中都是固定的。对于将要改变的数据，我们必须使用状态。

一般来说，你应该在构造函数中初始化状态，然后当你想改变它时调用setState。

例如，我们假设我们想让文字一直闪烁。当闪烁组件被创建时，文本本身被设置一次，所以文本本身就是一个道具。 “文本是否打开或关闭”随着时间的推移而改变，所以应该保持状态。

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

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {isShowingText: true};

        // 每秒修改状态
        setInterval(() => {
            this.setState(previousStatus => {
                return { isShowingText: !previousStatus.isShowingText };
            });
        }, 1000);
    }
    
    render() {
        let display = this.state.isShowingText ? this.props.text : '';
        return (
            <Text>{display}</Text>
        );
    }
}
export default class BlinkApp extends Component {
    render() {
        return (
            <View>
                <Blink text='这是测试文本1' />
                <Blink text='这是测试文本2 这是测试文本2' />
                <Blink text='这是测试文本3 这是测试文本3 这是测试文本3' />
            </View>
        );
    }
}

image.gif

在实际的应用程序中，您可能不会使用计时器来设置状态。当有新的数据从服务器到达时，或从用户输入时，您可能会设置状态。您也可以使用像Redux这样的状态容器来控制数据流。在这种情况下，您将使用Redux来修改您的状态，而不是直接调用setState。

当调用setState时，BlinkApp将重新渲染其组件。通过在定时器中调用setState，组件将在每次定时器打勾时重新呈现。

状态的工作方式与在React中的工作方式相同，因此有关处理状态的更多详细信息，可以查看React.Component API。