React生命周期

React生命周期

React生命周期.png

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

官网地址

一、挂载(初始化)

• constructor

1. 当前生命周期在初始化时执行，必须要写super，否则this的指向会发生错误。
2. this.state中存放当前组件所需要的状态。
3. 在constructor中传入参数props，才能可以访问this.props。

• componentWillMount

1. 在挂载前的生命周期，此时数据和模板还未结合，可以对数据做最后的更改。
2. 可以接收到外部的数据，访问this.props。
3. 因为是异步渲染机制中容易产生bug，所以在17.0中被废除了

• render（多）^[1]

1. 数据和模板相结合的渲染函数，执行时会将渲染好的模板存储在缓存中，当下一次render函数渲染时进行diff比较（将新旧DOM模板比较，根据不同更新渲染）
2. 当this.setState或this.props改变时触发，因此会多次执行。
3. 通过shouldCompnentUpdate减少render函数渲染的次数，从而得到性能优化。

• componentDidMount

1. 数据和模板结合完毕，已经挂载到页面上，此时可以获取到真实的DOM结构。
2. 进行前后端数据的交互、方法的实例化（swiper）
3. 父组件中的数据修改，子组件重新执行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（多）

1. 当props的数据发生改变时执行，有参数：新的props
2. 当前生命周期在17.x的版本中被废除掉了

• shouldComponentUpdate（多）

1. 当前生命周期，必须return布尔值，当值为true时继续执行下面的生命周期，为false时不再执行
2. 当前生命周期有两个参数，新的props和state，根据新的props/state与旧的比较，从而减少render函数渲染的次数。
3. shouldComponentUpdate这个生命周期决定了render函数是否渲染（return false时不渲染），而不是决定数据是否更新。（因为数据是一定会更新的，它只能决定是否渲染更新后的数据）
4. 强制更新this.foreUpdate()

• getSnapshotBeforeUpdate()

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

• componentWillUpdate（多）

1. 数据更新时执行，有两个参数：新的props和state，可以对更新的数据做最后的更改
2. 不能在这里调用this.setState（会执行shouldComponentUpdate，再进调用自身，造成死循环）
3. 在17.0版本中被废除了

• componentDidUpdate（多）

1. 数据更新完成后执行，可以获取到最新的DOM结构(切记加边界条件)
2. 当前生命周期中会有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

---

---

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