React生命周期

React生命周期.png

React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后)

官网地址

一、挂载(初始化)

constructor

当前生命周期在初始化时执行，必须要写super，否则this的指向会发生错误。

this.state中存放当前组件所需要的状态。

在constructor中传入参数props，才能可以访问this.props。

componentWillMount

在挂载前的生命周期，此时数据和模板还未结合，可以对数据做最后的更改。

可以接收到外部的数据，访问this.props。

因为是异步渲染机制中容易产生bug，所以在17.0中被废除了

render（多）^[1]

数据和模板相结合的渲染函数，执行时会将渲染好的模板存储在缓存中，当下一次render函数渲染时进行diff比较（将新旧DOM模板比较，根据不同更新渲染）

当this.setState或this.props改变时触发，因此会多次执行。

通过shouldCompnentUpdate减少render函数渲染的次数，从而得到性能优化。

componentDidMount

数据和模板结合完毕，已经挂载到页面上，此时可以获取到真实的DOM结构。

进行前后端数据的交互、方法的实例化（swiper）

父组件中的数据修改，子组件重新执行componentDidMount

getDerivedStateFromProps

通常在子组件中定义，可以拿到父组件传递的属性，同时可以拿到当前组件的state

static getDerivedStateFromProps(props,state){
    return{
        ...props,
        ...state,
    }
}

React如何访问真实的DOM节点

第一种

 <h2 ref="dom">title</h2>
 componentDidMound(){
   console.log(this.refs.dom);
 }

第二种

给当前元素添加一个属性，值为当前DOM节点

 <h2 ref={(value)=>{this.dom=value}}>title</h2>
 componentDidMound(){
     console.log(this.dom);
 }

二、更新

componentWillReceiveProps（多）

当props的数据发生改变时执行，有参数：新的props

当前生命周期在17.x的版本中被废除掉了

shouldComponentUpdate（多）

当前生命周期，必须return布尔值，当值为true时继续执行下面的生命周期，为false时不再执行

当前生命周期有两个参数，新的props和state，根据新的props/state与旧的比较，从而减少render函数渲染的次数。

shouldComponentUpdate这个生命周期决定了render函数是否渲染（return false时不渲染），而不是决定数据是否更新。（因为数据是一定会更新的，它只能决定是否渲染更新后的数据）

强制更新this.foreUpdate()

getSnapshotBeforeUpdate()

在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

componentWillUpdate（多）

数据更新时执行，有两个参数：新的props和state，可以对更新的数据做最后的更改

不能在这里调用this.setState（会执行shouldComponentUpdate，再进调用自身，造成死循环）

在17.0版本中被废除了

componentDidUpdate（多）

数据更新完成后执行，可以获取到最新的DOM结构(切记加边界条件)

当前生命周期中会有2个参数：旧props和state

三、卸载

componentWillUnmount

组件被卸载时执行的生命周期，可以在这里做性能优化。

（eg：事件解绑、定时器的移除）

四、总结

React中第一次执行的生命周期有哪些？
1. constructor
2. componentWillMount
3. render
4. componentDidmount
执行一次的生命周期有哪些？
1. constructor
2. componentWillMount
3. componentDidMount
4. componentWillUnmount
执行多次的声明周期有哪些？
1. componentWillRecevieProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate
当this.props执行的时候会执行哪些生命周期？
1. componentWillRecevieProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate
当this.setState执行的时候会执行哪些生命周期？
1. shouldComponentUpdate
2. componentWillUpdate
3. render
4. componentDidUpdate

多，表示当前声明周期会多次执行 ↩