本文将对 React 的16.4版本中，生命周期中的三大阶段：挂载、更新、卸载的执行场景和使用的使用场景进行简要的概述，更多关于 React 生命周期的最新使用，请查看官网
挂载阶段： 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
constructor()
执行场景
在 React 组件挂载之前，会调用它的构造函数。只会执行一次
使用场景
通过给 this.state 赋值对象来初始化组件内部的 state，或为事件处理函数绑定实例
注意事项
在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。
在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，则直接在构造函数中为 this.state 赋值初始 state
static getDerivedStateFromProps()
执行场景
初始化阶段执行在 constructor() 方法之后，在 render() 方法之前调用，并且在后续更新时都会被调用。
使用场景
从属性里面获取派生状态，在函数的挂载阶段和更新阶段都会执行
注意事项
static getDerivedStateFromProps(props,state) 的 state 的值在任何时候都取决于 props
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
render()
执行场景
初始化阶段执行在 constructor() 方法之后，并且在后续更新时都会被调用。
使用场景
render() 方法是 class 组件中唯一必须实现的方法。
遵循 JSX 语法糖
注意事项
当 render 被调用时，当返回 布尔类型或 null 或 undefined，什么都不渲染。
componentDidMount()
执行场景
在render()方法之后，只能执行一次
使用场景
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
可以在 componentDidMount() 里直接调用 setState()。
发起 ajax 请求，实例化第三方插件、初始化定时器的绑定
更新阶段： 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
static getDerivedStateFromProps()
执行场景
当 props 或 state 发生变化时，会在调用 render 方法之前调用。
使用场景
从属性里面获取派生状态，在函数的挂载阶段和更新阶段都会执行
注意事项
static getDerivedStateFromProps(props,state) 的 state 的值在任何时候都取决于 props
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
shouldComponentUpdate()
执行场景
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。
使用场景
根据 shouldComponentUpdate(nextProps,nextState) 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。
注意事项事项
shouldComponentUpdate() 方法仅作为性能优化的方式（优化 react 的 render 的渲染次数）而存在，或考虑使用内置的 PureComponent 组件
针对无状态组件，则使用 React.memo(组件) 来进行性能提升
首次渲染或使用 forceUpdate() 时不会调用该方法。
这个方法如果返回 false，那么 props 或 state 发生改变的时候会阻止子组件发生重新渲染
如果 shouldComponentUpdate(nextProps, nextState) 返回 false，则不会调用 UNSAFE_componentWillUpdate(nextProps, nextState)，render() 和 componentDidUpdate()。
render()
执行场景
当 props 或 state 发生变化时
使用场景
当 props 或 state 发生变化时
注意事项
当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回。
getSnapshotBeforeUpdate()
执行场景
当 props 或 state 发生变化后
使用场景
该方法不会再组件初始化时触发，使用这个方法可以对组件中的DOM进行操作
getSnapshotBeforeUpdate(prevProps, prevState, snapshot) 的任何返回值将作为参数传递给 componentDidUpdate()，应返回 snapshot 的值（或 null）。
注意事项
如果 shouldComponentUpdate(nextProps, nextState) 返回false, 那么 componentDidUpdate(prevProps, prevState) 不会被触发
该方法不能调用 this.setState({})
componentDidUpdate()
执行场景
在 render() 方法之后
使用场景
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
注意事项
如果组件实现了 getSnapshotBeforeUpdate() 生命周期，则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。
如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。
当 ajax 请求的数据改变引发的真实dom结构已经挂载完毕了，可以通过使用 componentDidUpdate() 实例化第三方插件
卸载阶段 当组件从 DOM 中移除时会调用如下方法：
componentWillUnmount()
执行场景
把组件从 dom 中移除的时候
使用场景
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除定时器，取消 ajax，卸载实例化第三方的一些插件
注意事项
通过引入 react-dom，当 ReactDOM.unmountComponentAtNode() 调用的时候，就执行 componentWillUnmount()
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。
原文：https://www.cnblogs.com/Welin/p/12726728.html