React生命周期与常见使用场景

前言

对于react的生命周期一直是在工作中很重要的,我们往往需要在需要的时间段做自己需要的事情,在 React 中，生命周期大致上可以分为初始化（Initialization）、挂载（Mounting）、更新（Updating）和卸载（Unmounting）这几个阶段，每个阶段又会分别调用不同的生命周期函数。当然随着react版本的更新,也会出现相对的变化,所以我们现在来参考总结下

大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，何况16也是基于之前的修改

一初始化阶段 Initialization

也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类，也就继承这个react的基类，才能有render(),生命周期等方法可以使用，这也说明为什么函数组件不能使用这些方法的原因。super(props) 用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state可变)。而 constructor() 用来做一些组件的初始化工作，如定义this.state的初始内容。

注意:
constructor不算生命周期函数。constructor我们叫构造函数，它是ES6的基本语法。虽然它和生命周期函数的性质一样，但不能认为是生命周期函数。但是你要心里把它当成一个生命周期函数，我个人把它看成React的Initialization阶段，定义属性（props）和状态(state)。

import React, {
    Component } from 'react'
class Test extends Component {
   
  constructor(props) {
   
  super(props)
  }
}

二挂载阶段 Mounting

componentWillMount: 在组件即将被挂载到页面的时刻执行。

在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。

render: 页面state或props发生变化时执行。

根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render），return一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。

componentDidMount: 组件挂载完成时被执行。

组件挂载到DOM后调用，且只会被调用一次

export default class App extends Component {
   
  componentWillMount () {
   
    console.log('componentWillMount----组件将要挂载到页面的时刻')
  }
  render() {
   
    console.log('render---组件挂载中.......')
    return (
      <div>
        <TodoList/> 
        <ReduxTodoList/>
      </div>
    )
  }
  componentDidMount () {
   
    console.log('componentDidMount----组件挂载完成的时刻执行')
  }
}

打印的结果:

componentWillMount----组件将要挂载到页面的时刻执行
render----开始挂载渲染
componentDidMount----组件挂载完成的时刻执行

这就是挂载阶段的生命周期的执行顺序,当然他跟书写顺序没有关系

注意:
componentWillMount和componentDidMount这两个生命周期函数，只在页面刷新时执行一次，而render函数是只要有state和props变化就会执行，这个初学者一定要注意。

三更新阶段 Updation

这个阶段是较为复杂的阶段,由上面的图可以看出造成组件更新有两类的情况,需要先明确下React组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render

shouldComponentUpdate在组件更新之前，自动被执行,它要求返回一个布尔类型的结果，必须有返回值，这里就直接返回一个true了（真实开发中，这个是有大作用的,能有有效的解决性能的问题）,如果你返回了false，这组件就不会进行更新了。简单点说，就是返回true，就同意组件更新;返回false,就反对组件更新。此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行,但是shouldComponenUpdate返回的是false的时候就会反对组件的更新,这个函数就不会执行
componentDidUpdate在组件更新之后执行，它是组件更新的最后一个环节

export default class App extends Component {
   
  shouldComponentUpdate () {
   
    console.log ('1.shouldComponentUpdate----组件更新之前')
    return true
  }
  componentWillUpdate () {
   
    console.log ('2.componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行 ')
  }
  render() {
   
    console.log('3.render---组件挂载渲染.......')
    return (
      <div>
        <TodoList/> 
        <ReduxTodoList/>
      </div>
    )
  }
  componentDidUpdate () {
   
    console.log('componentDidUpdate----组件更新完成的时刻执行')
  }
}

打印结果与执行顺序

1-shouldComponentUpdate---组件发生改变前执行
2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
3-render----开始挂载渲染
4-componentDidUpdate----组件更新之后执行

那么上图中的componentWillReceiveProps在什么时候执行呢,其实子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。
注意:
使用componentWillReceiveProps组件第一次存在于Dom中，函数是不会被执行的;
如果已经存在于Dom中，函数才会被执行。
当父组件传递的 props 即将引起组件更新时会被调用，该方法接受一个参数指的是当前父组件传递给组件的最新的 props 状态数据。在这个生命周期方法中，我们可以根据比较 nextProps 和 this.props 新旧 props 的值查明 props 是否改变，依次做一些数据处理的逻辑。

销毁阶段 Unmounting

这个阶段就只一个生命周期函数:componentWillUnmount,此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素、解绑事件等，以避免引起内存泄漏

总结利用生命周期函数的优化页面:

在componentDidMount生命周期函数里请求ajax，建议在componentDidMount函数里执行，因为在render里执行，会出现很多问题，比如一直循环渲染；在componentWillMount里执行，在使用RN时，又会有冲突。所以强烈建议在componentDidMount函数里作ajax请求。
在父组件更新的时候传递到子组件的时候导致pros反正改变,子组件的render函数不停触发,出现性能问题,我们可以这个一般发生在更新阶段,所以利用shouldComponentUpdate

shouldComponentUpdate(nextProps,nextState){
   
    if(nextProps.content !== this.props.content){
   
        return true
    }else{
   
        return false
    }

}

React v16.4 的生命周期

变更缘由

原来（React v16.0前）的生命周期在React v16推出的Fiber之后就不合适了，因为如果要开启async rendering，在render函数之前的所有函数，都有可能被执行多次。
原来（React v16.0前）的生命周期有哪些是在render前执行的呢？

componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

如果开发者开了async rendering，而且又在以上这些render前执行的生命周期方法做A JAX请求的话，那AJAX将被无谓地多次调用。。。明显不是我们期望的结果。而且在componentWillMount里发起AJAX，不管多快得到结果也赶不上首次render，而且componentWillMount在服务器端渲染也会被调用到（当然,也许这是预期的结果），这样的IO操作放在componentDidMount里更合适。

禁止不能用比劝导开发者不要这样用的效果更好，所以除了shouldComponentUpdate，其他在render函数之前的所有函数（componentWillMount，componentWillReceiveProps,componentWillUpdate）都被getDerivedStateFromProps替代。

也就是用一个静态函数getDerivedStateFromProps来取代被deprecate的几个生命周期函数，就是强制开发者在render之前只做无副作用的操作，而且能做的操作局限在根据props和state决定新的state

新引入了两个新的生命周期函数：

1. getDerivedStateFromProps

getDerivedStateFromProps 本来（React v16.3中）是只在创建和更新（由父组件引发部分），也就是不是不由父组件引发，那么getDerivedStateFromProps也不会被调用，如自身setState引发或者forceUpdate引发
这样的话理解起来有点乱，在React v16.4中改正了这一点，让getDerivedStateFromProps无论是Mounting还是Updating，也无论是因为什么引起的Updating，全部都会被调用，具体可看React v16.4 的生命周期图。
getDerivedStateFromProps(props, state) 在组件创建时和更新时的render方法之前调用，它应该返回
一个对象来更新状态，或者返回null来不更新任何内容

每当父组件引发当前组件的渲染时，getDerivedStateFromProps 会被调用，这样我们有机会可以根据新的 props 和之前的 state 来调整新的 state。如果放在三个被 deprecate 生命周期函数中实现比较纯，没有副作用的话，就可以搬到 getDerivedStateFromProps 了；如果不幸做了类似 AJAX 之类的操作，首先要反省为什么自己当初这么做，然后搬到 componentDidMount 或者 componentDidUpdate 中去。目前当你使用三个被 deprecate 生命周期函数时，开发模式下会有红色警告，要求你使用 UNSAFE_ 前缀。可能会在打一次大版本更新时直接废弃，所以那些抱有侥幸心理的开发者还是放弃使用吧。

2. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。
官网给的例子:

class ScrollingList extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.listRef = React.createRef();
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
   
    //我们是否要添加新的 items 到列表?
    // 捕捉滚动位置，以便我们可以稍后调整滚动.
    if (prevProps.list.length < this.props.list.length) {
   
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
   
    //如果我们有snapshot值, 我们已经添加了 新的items.
    // 调整滚动以至于这些新的items 不会将旧items推出视图。
    // (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
    if (snapshot !== null) {
   
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }
  render() {
   
    return (
      <div ref={
   this.listRef}>{
   /* ...contents... */}</div>
    );
  }
}