react组件的生命周期--销毁阶段

责编:menVScode 2017-06-18 21:26 阅读(845)

        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)
    },
    componentWillUnmount:function(){
        console.log('已销毁..BOOOOOM...')
    }
});
var ParentDemo = React.createClass({
    getInitialState:function(){
        return {
            name:''
        }
    },
    doChange:function(e){
         // 利用input输入的内容来卸载组件
        if(e.target.value == '111'){
            //组件渲染到哪里的那个节点
            ReactDOM.unmountComponentAtNode(document.getElementById("app"))
            // 写上这个return是为了不执行下面的语句,减少代码执行时间
            return ;
        }
        this.setState({
            name:e.target.value
        })
    },
    render:function(){
        // 通过判断state的状态来卸载组件
        // if (this.state.name=='111'){
        //     return <div>被销毁了。</div>
        // };
        return(
            <div>
                <HellReact name={this.state.name} />
                <input type='text' onChange={this.doChange} />
            </div>
        )
    }
});
ReactDOM.render(
    <ParentDemo/>,document.getElementById('app')
)

       组件的销毁有几种方法:

        一种是在渲染节点的时候,通过判断state的状态来卸载组件,具体看上面的例子。

if (this.state.name=='111'){
    return <div>被销毁了。</div>
};

        一种是在事件内部,通过判断输入的内容来卸载组件,这里要用到ReactDOM中提供一个方法unmountComponentAtNode(删除节点的名字)。

doChange:function(e){
     // 利用input输入的内容来卸载组件
    if(e.target.value == '111'){
        //组件渲染到哪里的那个节点
        ReactDOM.unmountComponentAtNode(document.getElementById("app"))
        // 写上这个return是为了不执行下面的语句,减少代码执行时间
        return ;
    }
    this.setState({
        name:e.target.value
    })
}
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码