在讲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>
        );
    }
}