原文地址,本文为原文的不完全翻译
状态
组件Component由两个部分控制它在屏幕上的展示凡是,分别是属性prop和状态State,而属性通常是跟随者组件的生命周期变化的,不能随意改动,如果我们想改变组件的一些显示方式,那么只能使用状态状态State了.
一般来说,在组件的构造方法里面初始化组件的状态,然后在你需要的地方通过setState改变组件的状态,从而达到你想要的效果.
下面的例子是通过改变控件的属性达到让文字进行闪烁的效果:
import React, { Component } from 'react';
import {AppRegistry, Text, View} from 'react-native';
class Blink extends Component {
constructor(props){
super(props);
this.state = {showText: true};
/*一秒闪烁一次*/
setInterval(() => {
this.setState({ showText : !this.state.showText });
}, 1000);
}
render(){
let displayText = this.state.showText ? this.props.text : ''
return (<Text>{displayText}</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);
在真正的应用开发时,极少情况是通过定时器来改变组件的状态的,大多数情况是根据服务器返回的数据和用户的操作来改变,这时候可以使用Redux来控制组件的数据流.
在这个例子里面,每调用一次setState方法BlinkApp就会调用一次render()方法来重新渲染到屏幕上面,State每被改变一次,就会调用一次render()重新渲染,这就是State在React中的作用方式.
