React 新版生命周期(v16.4)

生命周期简单说明

下图已经画的很详细了，简单整理一下每个生命周期的要点。

constructor()

constructor(props)

React组件的构造函数在挂载之前被调用

static getDerivedStateFromProps()

static getDerivedStateFromProps(nextProps, prevState)

这个生命周期的功能实际上就是将传入的props映射到state上面。

16.4版本，这个函数会在每次重新渲染之前被调用，props和state的变化就会调用该生命周期。

组件实例化后和接受新属性时将会调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态。

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

如果shouldComponentUpdate()返回false，render()不会被调用。

使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下你应该依赖于默认行为。

一般这个方法用来优化组件，不过不提倡过早优化，在组件遇到瓶颈的时候，可以考虑使用这个方法做一定的优化。

render()

render()函数应该纯净，意味着其不应该改变组件的状态，其每次调用都应返回相同的结果，同时不直接和浏览器交互。若需要和浏览器交互，将任务放在componentDidMount()阶段或其他的生命周期方法。保持r