React三——生命周期

生命周期相关函数

初始化的时候会执行4个钩子：constructor、componentWillMount、render、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、componentWillReceiveProps
   组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

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

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