生命周期四大阶段

我通常把react生命周期划分为四个阶段：组件初始化，组件挂载，组件更新，组件卸载。

组件初始化（initialization）

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

super(props)用来调用基类的构造方法(constructor()), 也将父组件的props注入给子组件，供子组件读取(组件中props只读不可变，state可变)。
而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

组件挂载（Mounting）

此阶段分为componentWillMount，render，componentDidMount三个时期。

componentWillMount
在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。
在componentWillMount里发起请求，不管多快得到结果也赶不上首次render，而且componentWillMount在服务器端渲染也会被调用到（当然，也许这是预期的结果），这样的IO操作放在componentDidMount里更合适。
常用参数：this.props，this.state
含义：当前的props，state
render
根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render），return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。
comonentDidMount
组件挂载到DOM后调用，且只会被调用一次，这时可以获取到真实的DOM节点。
常用参数：this.props，this.state
含义：当前的props，state。

组件更新（update）

setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。
在此阶段主要涉及了componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate几个周期。

componentWillReceiveProps(nextProps)
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以可以在这个方法中判断nextProps和this.props是否改变，以及改变了要执行什么操作，比如根据新的props调用this.setState更新子组件数据并重新渲染子组件。
常用参数：nextProps，this.props，this.state
含义：新的props，更新前的props，当前的state。
shouldComponentUpdate(nextProps,nextState)
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
常用参数：nextProps，nextState，this.props，this.state
含义：更新后的props，更新后的state，更新前的props，更新前的state。
componentWillUpdate(nextProps,nextState)
此方法在调用render方法前执行，在这里可以执行一些组件更新发生前的工作，一般较少用。
render
重新调用render，与组件挂载阶段功能一致。
componentDidUpdate(prevProps,prevState)
此方法在组件更新后被调用，可以操作组件更新后的DOM。
常用参数：prevProps，prevState，this.props，this.state
含义：更新前的props，更新前的state，更新后的props，更新后的state。

组件卸载（Unmount）

这个阶段只有一个生命周期：componentWillUnmount，此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清除组件中使用的定时器，清除componentDidMount中手动创建的DOM元素等，以免引起内存泄漏。

React v16.4 的生命周期

原来（React v16.0前）的生命周期在React v16推出的Fiber之后就不合适了，因为如果要开启async rendering，在render函数之前的所有函数（componentWillMount，componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate），都有可能被执行多次，这意味着IO操作（数据请求）也有可能被多次调用。
为了解决这个问题，React v16.3的更新中引入了两个新的生命周期函数：getDerivedStateFromProps，getSnapshotBeforeUpdate。

static getDerivedStateFromProps(props, state)

static getDerivedStateFromProps(props, state)在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态（需要提前初始化state状态），或者返回null来不更新任何内容。也就是说，无论哪一种情况（setState引起的state更新或父组件重新render引起的props更新）引起的组件更新都将调用它。所以除了shouldComponentUpdate，其他在render函数之前的所有函数（componentWillMount，componentWillReceiveProps，componentWillUpdate）都可以被一个静态函数getDerivedStateFromProps替代，强制开发者在render之前只做无副作用的操作，而且能做的操作局限在根据props和state决定新的state。
常用参数：props，state
含义：更新后的props，更新后的state。

getSnapshotBeforeUpdate(prevProps,prevState)

getSnapshotBeforeUpdate() 被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在DOM可能更改之前捕获一些信息（例如滚动位置）。该生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
常用参数：prevProps，prevState，this.props，this.state
含义：更新前的props，更新前的state，更新后的props，更新后的state。
官方示例：

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>
    );
  }
}

react学习笔记-react生命周期