去年曾经使用过React，那个时候还是使用的React v14，今年又要使用到React，发现最新的React的生命周期已经有了一些变化，有一些生命阶段在v17的时候即将要被废弃，所以特此记录一下。
React有组件这一概念，对于每一个组件来说，都有其自己的生命周期，我觉得可以理解为设计模式中的模板，我们可以复写每一个方法，但是这些方法始终遵循着一个固定的顺序在运行。
生命周期的各个阶段
React生命周期有三个阶段：
1. Mounting
这个阶段表示当一个组件被实例化创建并且插入到DOM中。在这个阶段，被调用的方法有：
- constructor()
- static getDerivedStateFromProps()
- componentWillMount() / UNSAFE_componentWillMount()
- render()
- componentDidMount()
2. Updating
当组件已经被插入到DOM中，渲染完毕后，props／state发生改变，即组件的状态发生了改变，此时组件会被重新渲染。在这个阶段，被调用的方法有：
- componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- componentWillUpdate() / UNSAFE_componentWillUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
3. Unmounting
这个阶段意味着组件将要被移出DOM。在这个阶段，被调用的方法有：
- componentWillUnmount()
此外还有一个特殊的阶段。
Error Handling
当在构造函数、生命周期函数或渲染的时候出现错误时，将会调用以下方法：
- componentDidCatch()
生命周期函数详解
constructor()
此函数在组件被mount前被调用。如果实现该方法的组件是 React.Component 的子类，那么在写其他代码前需要调用 super(props) 方法，否则在构造函数中 this.props 就是 undefined，就会因此导致一些bug的产生。
该方法用于初始化 state, 和在组件实例上绑定事件 handler。需注意，初始化 state 时，只能使用this.state来进行初始化，不可以使用 setState()。
如果不需要初始化任何 state，也不需要绑定任何事件的话，那么这个方法就可以不实现。（如果没有用到的话，在运行的时候浏览器上也会提示这个方法没有用哟～）
static getDerivedStateFromProps()
这个方法是相较于之前的版本新加入的方法，之前在列举各个阶段的方法时，可以发现有一些方法前边带有 UNSAFE，官方建议是使用 getDerivedStateFromProps()来代替那些方法的使用。
这个方法将会在组件实例化和接收到新的 props 的时候被调用。可以看出，当组件实例化的时候，这个方法替代了componentWillMount()，而当接收到新的 props 时，该方法替代了 componentWillReceiveProps() 和 componentWillUpdate()。
需要注意，这个方法是个 static 的方法，因此使用 this 在这个方法中并不指代本组件，如果打印出来会发现这个this在这个方法中是null。而且这个方法会返回值。 当需要更新状态时，需要返回一个 object ，如果不需要任何更新，则返回null即可。
如果由于父组件的原因导致该组件重新渲染，这个方法也会被调用, 如果只想要处理更新的话，最好加上判断条件if (nextProp !== prevProp)。另外，虽然this.setState()也会导致组件重新渲染，但并不会导致这个方法的重新调用。
componentWillMount() / UNSAFE_componentWillMount()
现在componentWillMount()和UNSAFE_componentWillMount()两个方法名共存，但是在v17中，componentWillMount()将不再存在，取而代之的则是只有UNSAFE_componentWillMount()。其他类似的同样如此。官方现在是推崇使用getDerivedStateFromProps()，对于已经存在的应用，使用UNSAFE则是不推崇但是向下兼容的一种做法。
这个方法在 mounting 发生之前被调用。由于这个方法在render()前被调用，因此即使在这个方法中调用setState()，也不会导致额外的渲染。
render()
一个组件中必须有这个方法。
这个方法需要返回一下几种东西之一：
- React elements：element 可以是一个原生的 DOM 组件
<div />, 或是一个用户自定义的组件<MyComponent />. - String and numbers
- Portals: Created with ReactDOM.createPortal.
- null
- Booleans: 有时可能是一个类似于
return test && <Child />的pattern。
当返回值为null, false, ReactDOM.findDOMNode(this)时，即返回null.
render()方法需要是一个很干净的方法，它不应改变任何组件状态，每次被调用都应该返回相同的东西，且不应与浏览器有直接的交互。如果需要跟浏览器产生交互的话，官方建议是在componentDidMount() 或其他生命周期函数中进行，而不是render()
需注意，若shouldComponentUpdate()返回值为false时，render()方法不会被调用。
componentDidMount()
这个方法在组件被mount后被立即调用。如果需要从远端加载数据的话，推荐在这个方法中初始化网络请求。
由于这个方法发生在render()之后，因此在这个方法中调用setState()会导致一次额外的渲染，只不过这次渲染会发生在浏览器更新屏幕之前。因此即使渲染了两次，用户也不会看到中间状态，即不会有那种状态突然跳一下的情况发生。对于像modals和tooltips这种需要在渲染前知道尺寸大小、位置的情况来说，也是很有用。只不过，虽然在用户视觉体验上可能没有影响，但是这种操作可能会导致性能方面的问题，因此还需慎用。
