React三——生命周期

发布时间:2019-06-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React三——生命周期脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

生命周期相关函数

初始化的时候会执行4个钩子:constructor、componentWillMount、render、componentDid@R_777_1282@

1constructor 
页面加载的时候执行
    constructor (PRops) {
        suPEr(props)//this
            this.state = {
            str: 'hello'
        }
     }
     
 2、componentWillMount 
 在render之前 在完成首次渲染之前调用,此时仍可以修改组件的state。
 
 3、render 
 页面加载执行 创建虚拟dom 如果有子组件 则会先执行子组件的constroctor render 和componentDidMounter 再执行本身的componentDidMounter
 
 4、componentDidMount 
 真实的DOM被渲染出来后调用
 
 5、componentWillUnmount 
 节点删除之前执行    

当组件被重新渲染的时候出发的钩子函数:只要修改组建的state 不管有没有引用state状态
都会重新shouldComponentUpdate(true继续执行 否则停止) 、componentWillUpdate 、render 、 componentDidUpdate


1、render()
2、componentDidUpdate    
//更新完成后被调用
componentDidUpdate(){
    console.LOG('componentDidUpdate')
}
3.componentWillUpdate   
//先与render()之前
componentWillUpdate(){
    console.log('componentWillUpdate')
}
4、shouldComponentUpdate 
//准备update 但不一定update 在update之前 直接返回true 或false 在componentWillUpdate之前,意义在于提高react性能 以及如果dom没变 就返回false 无需进行后面的的函数 以免不必要的浪费性能
shouldComponentUpdate() {
    console.log('shouldComponentUpdate') 
    return false;
}
5、componentWillReceiveProps
   组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) {
    if (nextProps.bool) {
        this.setState({
            bool: true
        });
    }
}

最后 卸载,componentWillUnmount 清理工作 事件解除绑定 清理定时器 释放资

脚本宝典总结

以上是脚本宝典为你收集整理的React三——生命周期全部内容,希望文章能够帮你解决React三——生命周期所遇到的问题。

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

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