React三——生命周期

前端之家收集整理的这篇文章主要介绍了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 //第二次被渲染时候才会被执行

猜你在找的React相关文章