React三——生命周期

生命周期相关函数

初始化的时候会执行4个钩子：constructor、componentWillMount、rende、componentDidMount

1、constructor 
页面加载的时候执行
    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、componentWillReceviceProps //第二次被渲染时候才会被执行

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!