在讲React/React Native状态机原理之前,先让大家看一个春哥用React编写的小案例的网页效果图,当文本框中的内容发生变化时,会将文本框中的内容同步输出,按照我们之前Android和iOS的思维,当文本框中内容发生变化时,它会触发一个回调函数,然后在回调函数中取出文本框中的text值然后赋给下面的一个label。
http://yiqizhongchuang.cn/3reactreact-native
状态机思维
React 框架将所有的UI视为一个简单的状态机,那么任意一个UI场景就是一个状态机中一种状态。根据决定状态的状态机变量的值,React框架渲染出状态机的当前状态----对于开发者来说,单个UI场景就被渲染出来了。随着状态机变量值的改变,UI状态机也在不停的改变状态,UI场景也随之不停的被重新渲染。这样一个过程可以轻松的做到数据与UI保持一致。接下来根据源码分析一下上面效果图实现的原理:
<script type="text/babel"> class ShowEditor extends React.Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = {value: '你可以在这里输入文字'}; } handleChange() { this.setState({value: ReactDOM.findDOMNode(this.refs.textarea).value}); } render() { return ( <div> <h3>输入</h3> <textarea style={{width:300, height:150, outline:'none'}} onChange={(text) => this.handleChange(text)} ref="textarea" defaultValue={this.state.value} /> <h3>输出</h3> <div> {this.state.value} </div> </div> ); } } ReactDOM.render(<ShowEditor />, document.getElementById('example')); </script>
状态机变量value的默认值为:'你可以在这里输入文字',当我们修改textarea里面的值时,就会触发handleChange函数(PS:给onChange赋值时最好用箭头函数,不要写成onChange={this.handleChange}),在handleChange函数里面改通过this.state将textarea里面的值赋给状态机变量value。重要:当状态机变量的值发生变化时,就会重新调用render函数进行UI渲染。状态机变量的值只要发生变化就会调用render函数重新渲染一次。
React Native案例
只要你弄明白React的状态机原理以后,React Native的原理和React是一样的,接下来我让大家看看React Native的效果图和源码。
效果图:
源码:
class rn_state_demo extends Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = {textInputValue: '你可以在这里输入文字'}; } updateTextInputValue(newText){ this.setState({textInputValue: newText}); } render() { return ( <View style={styles.container}> <TextInput style={styles.textInputStyle} placeholder={'你可以在这里输入文字'} onChangeText={(newText) => this.updateTextInputValue(newText)} /> <Text style={styles.textShow}> {this.state.textInputValue} </Text> </View> ); } }