React的生命周期

基于react16.x版本，保持更新

生命周期介绍

带 * 标识的为重要、常用的生命周期。

• constructor() *

  constructor是组件在初始化的时候的生命周期

  用途：

  • 我们可以在当前生命周期中存放当前组件所需要的一些状态，状态必须存放到this.state中去

  注意：

  • 当前生命在书写的时候必须要写super()，否则this的指向会发生错误。
  • 在当前生命周期中默认是访问不到this.props，如果需要访问this.props的时候必须要在constructor中和super中传入props

• componentWillMount()

  当前生命周期是组件挂载前执行的生命周期

  用途：

  • 用途不大

  • 当前生命周期是数据和模版还为进行相结合，因此我们可以在当前生命周期中进行数据的最后更改

  • 当前生命周期已经经过初始化，可以访问到this.props

  注意：

  • 当前生命周期在react17.x 版本中被废除了。

• render() *

  当前生命周期是一个渲染函数，在当前生命周期里数据和模板进行结合，插入jsx生成的dom结构。render中会将渲染好的模板缓存一份，当下一次执行render渲染的时候让它与新模板进行比较，不同的地方则更新渲染。这就是地府算法！（diff算法，diff即different，将新旧模板进行对比的算法）

  用途：

  • 当前生命周期的重要性毋庸置疑，用来渲染页面。
  • 当前生命周期会多次执行，当页面初始化、this.setState或者this.props发生改变的时候当前生命周期就会执行。

  优化：

  • 我们通过控制shouldComponentUpdate来减少render函数渲染的次数从而得到性能优化。

• componentDidMount() *

  当前生命周期是数据和模版已经结合完毕并且已经挂载到来页面上的生命周期

  用途：

  • 我们可以在当前生命周期中获取到真实的DOM结构。
  • 我们通常会在当前生命周期中进行前后端数据的交互(返回数据setState后组件会重新渲染)。
  • 在当前生命周期中进行方法的实例化(例如swiper)。

• componentWillReceiveProps(newProps)

  当props的数据发生改变的时候就会执行当前生命周期

  用途：

  • 用途不大
  • 在当前生命周期函数中会有一个参数，这个参数是新的props

  注意：

  • 当前生命周期在react17.x 版本中被废除了。

• shouldComponentUpdate(newProps,newState) *

  当前生命周期决定的render函数是否渲染，主要用于性能优化。使用的时候必须return一个布尔值，当值为true的时候继续执行下面的生命周期，为false的情况下则不在执行下面的生命周期

  用途：

  • 当前是生命周期中会有2个参数 一个是新的props 一个是新的state 我们可以根据新的props/state与旧的props/state进行比较，没改变则返回false不触发render，从而减少render函数渲染的次数，达到性能的优化。

• componentWillUpdate(newProps，newState)

  shouldComponentUpdate返回true后，当前生命周期会执行。

  在数据更新前执行，有2个参数，一个是新的props 一个是新的state

  用途：

  • 用途不大
  • 我们可以在当前生命周期中进行更新数据的最后更改

  注意：

  • 尽量不要在当前生命周期中调用this.setState——this.setState触发render，render又会触发componentWillUpdate，从而死循环
  • 当前生命周期在react17.x 版本中被废除了。

• componentDidUpdate(oldProps,oldState) *

  当前生命周期在数据更新完成后执行。react只会在第一次初始化成功会进入componentDidmount，之后每次重新渲染后都会进入这个生命周期。

  有2个参数，一个是旧的props 一个是旧的state

  用途：

  • 可以在当前生命周期中获取到数据更新后最新的DOM结构(切记加边界条件)

• componentWillUnmount() *

  当组件被卸载的时候会执行当前生命周期

  用途：

  • 在当前生命周期中做性能的优化：事件的解绑、定时器的移除等操作。

生命周期的分类

1. 只会执行一次的生命周期（挂载、卸载过程的生命周期）
   • constructor()
   • componentWillMount
   • componentDidMount
   • componentWillUnmount
2. 执行多次的生命周期（更新过程的生命周期）
   • componentWillReceiveProps
   • shouldComponentUpdate
   • componentWillUpdate
   • render
   • componentDidUpdate
3. 初始化页面的时候执行的生命周期
   • constructor
   • componentWillMount
   • render
   • componentDidMount
4. 当this.props改变的时候会执行哪些生命周期
   • componentWillReceiveProps
   • shouldComponentUpdate
   • componentWillUpdate
   • render
   • componentDidUpdate
5. 当this.setState执行的时候会执行哪些生命周期
   • shouldComponentUpdate
   • componentWillUpdate
   • render
   • componentDidUpdate