前端不得不知道的，React新旧生命周期梳理

React v16.3前生命周期：

在聊React v16.3版本的生命周期更新以前，让咱们先来回顾一下老的生命周期，以下是React 生命周期一览图：

须要注意的几点：

• shouldComponentUpdate在props和state更新时都会出发，返回true则继续更新，返回false不更新，是能够提高应用性能的生命周期函数；
• 在更新阶段的几个生命周期中不能用setState，(shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate)容易形成无限循环，除非经过某些判断停下来；

React v16.3生命周期：

React v16.3 不是React的大版本更新，却有了生命周期的大改动，即新增了两个生命周期：

• getDerivedStateFromProps
• getSnapshotBeforeUpdate

deprecate了三个生命周期（三个带will的）：

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps

变动原因

原来（React v16.0前）的生命周期在React v16推出Fiber以后就不合适了，由于若是要开启async rendering，在render函数以前的全部函数，都有可能被执行屡次。

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

若是在v16.3后的版本使用三个被禁用的生命周期，在其前面须要加上UNSAFE__，而在v17版本有可能直接被干掉没法使用。

React v16.4生命周期：

16.3和16.4的生命周期一览图：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

相比以前的版本，修改了getDerivedStateFromProps，使其在props，state变化和forceUpdate时都更新，这样这个生命周期理解起来更容易一些。

getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法以前调用，而且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，若是返回 null 则不更新任何内容。

咱们知道getDerivedStateFromProps是一个静态函数，在其中是没法访问到组件实例的，也就是强制开发者在render以前只作无反作用的操做，而是根据props和state决定新的state，仅此而已。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

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