React 教程第五篇 —— state

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React 教程第五篇 —— state脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

state

state 可以理解成 PRops,不一样的在于 props 是只读的,而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树,在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新,从而提升性能。
在使用 state 前要先初始化 getInITialState
更改 state 一定要用 setState
getInitialState 该方法在每次 render 时都会被调用一次。

//ES5
var StateComponent = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    change: function(event){
        this.setState({text: event.target.value});
    },
    render: function(){
        return (
            <div>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </div>
        )
    }
}) 

//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    state = {
        text: ''
    }
    change(event){
        this.setState({text: event.target.value});
    },
    render(){
        return (
            <div>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </div>
        )
    }
}

效果预览

脚本宝典总结

以上是脚本宝典为你收集整理的React 教程第五篇 —— state全部内容,希望文章能够帮你解决React 教程第五篇 —— state所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。