控制组件的数据有两种类型：属性和状态。属性由父母设置，在组件的整个生命周期中都是固定的。对于将要改变的数据，我们必须使用状态。
一般来说，你应该在构造函数中初始化状态，然后当你想改变它时调用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。
