react组件的生命周期--运行阶段

责编:menVScode 2017-06-18 20:37 阅读(730)

       通过一个例子来分析react组件生命周期的运行阶段是如何进行的。

// 子组件
var HellReact = React.createClass({
    // 组件将要接收新的属性
    componentWillReceiveProps:function(newProp){
        //newProp:获取将要更新的属性的对象
        console.log(newProp);
        console.log('componentWillRecieveProps',1);
    },
    // 是否允许组件更新,返回true或者false,一般不会改变它的默认值(true)
    shouldComponentUpdate:function(newProp,newState){
        //newProp:新的属性
        //newState:新的状态
        console.log(newProp,newState);
        console.log('shouldComponentUpdate',2);
        return true
    },
    // 组件将要更新
    componentWillUpdate:function(){
        console.log('componentWillUpdate',3)
    },
    render:function(){
        console.log('render',4)
        return <div>Hello {this.props.name?this.props.name:'React'}</div>
    },
    // 组件更新完毕
    componentDidUpdate:function(newProp,newState){//接收上一个属性和状态
        console.log(newProp,newState);
        console.log('componentDidUpdate',5)
    }
});
// 父组件
var ParentDemo = React.createClass({
    getInitialState:function(){
        return {
            name:''
        }
    },
    doChange:function(e){
        this.setState({
            name:e.target.value
        })
    },
    render:function(){
        return(
            <div>
                <HellReact name={this.state.name} />
                <input type='text' onChange={this.doChange} />
            </div>
        )
    }
});
ReactDOM.render(
    <ParentDemo/>,document.getElementById('app')
)

        componentWillReceiveProps组件将要接收新的属性,可以传入一个参数,代表获取将要更新的属性的对象。

        shouldCompoenntUpdate:组件是否更新,返回false会阻止render调用,render后面的函数都不会执行;此函数不写的话,默认返回是true。可以有两个参数,参数1:得到新的属性对象,参数2:得到新的状态对象。

        componentWillUpdate:组件将要更新,不能修改属性与状态,用于日志打印与数据获取;

        reder:只能访问this.props与this.state,只有一个顶层标签(组件),不允许修改状态和DOM输出

        componentDidUpdate:可以修改DOM,获取DOM节点进行相关操作。跟组件生命周期初始化阶段中componentDidMount函数用法差不多。

        跟新一次state的运行结果:

QQ截图20170618204026

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码