育知同创-中国HTML5培训、Java培训高品质教育品牌

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 北京校区 深圳校区

▶ 您现在的位置:首页 > 行业动态 > [技术文章]3分钟搞定React/RN之状态机原理

[技术文章]3分钟搞定React/RN之状态机原理

时间:2016-10-18 17:50:37  来源:育知同创  作者:育知

  • 在讲React/React Native状态机原理之前,先让大家看一个春哥用React编写的小案例的网页效果图,当文本框中的内容发生变化时,会将文本框中的内容同步输出,按照我们之前Android和iOS的思维,当文本框中内容发生变化时,它会触发一个回调函数,然后在回调函数中取出文本框中的text值然后赋给下面的一个label。

     

    1.jpg

    2.jpg

     

    状态机思维

    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的效果图和源码。
    效果图:
     
    4.jpg
     
     
    源码:
    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>
            );
        }
    }
     
    5.jpg
     
     
    相关文章

    [技术文章]React Native开源项目-“厕所在哪”

    [技术文章] 模块

    [技术文章]3分钟搞定React Native中CSS的使用





上一篇:[技术文章]The issues of Inter X86 HAXM (安卓 模拟器)

下一篇:[技术文章]YZNode ReactNative开源项目


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号