constructor
React借用class类的constructor充当初始化钩子。在我们类扩展任何其他具有已定义构造函数的类的情况下，调用一个特殊的函数super非常重要。
在React中，因为所有class组件都要继承自Component类或者PureComponent类，因此和原生class写法一样，要在constructor里首先调用super方法，才能获得this。
deprecated—componentWillMount
componentWillMount与构造函数没有太大的区别——它也只在初始安装生命周期中调用一次。
许多人会在这个函数中发送请求来获取数据，并期望在初次渲染就绪之前数据是可用的。
事实并非如此，尽管请求将在初次渲染之前被初始化，但在有时调用render之前它无法完成。
由于这一事实，不建议使用此函数可能会导致操作的副作用。
需要注意的是，在服务端渲染时调用此函数，而在这种情况下，不会在服务器上调用对应的componentDidMount，而是在客户端上调用。
在这个函数中使用setState不会触发render
static getDerivedStateFromProps(nextProps, prevState)
这个新的方法根据父组件传来的props按需更新自己的state，主要是来代替componentWillReceiveProps。
该方法定义的时候要加一个static关键字，访问不到this对象，在使用的时候，返回一个对象来增量更新组件的state（和setState非常像）
render
千万不要在render生命周期钩子里调用setState，因为setState会引发render，这样就没完没了。
componentDidMount
在组件挂载之后调用，并且只调用一次。
因为这个函数只保证被调用一次，所以它在这里执行ajax请求简直是完美。
deprecated—componentWillReceiveProps(nextProps)
在每次收到props(父组件重新渲染)的时候，在每个更新生命周期中都会调用此函数，而且会传递所有的props，无论props的值是否发生了改变，简单来说就是组件收到新的props或者父组件重新渲染，都会触发这个方法。
如果某个组件的部分state是依赖于父组件中传递过来的props，这个函数是理想的。
- 注意：即使
props没有发生变化，在componentWillReceiveProps也会被调用，这就需要开发者来判断其值是否已经发生改变。
componentWillReceiveProps(nextProps) {
if(nextProps.myProp !== this.props.myProps) {
// do something
}
}
shouldComponentUpdate(nextProps, nextState, nextContext)
默认情况下，所有基于Components的类在收到props时，state或context改变时，都会触发render。如果重新渲染组件涉及的计算比较复杂（比如生成图表）或者由于某些性能原因而不推荐，则开发人员就需要来控制一下了。当shouldComponentUpdate返回false的时候，就不会触发render。
React还提供了一个PureComponent，它与Component的区别是PureComponent自动实现了一个shouldComponentUpdate。
shouldComponentUpdate暴露了两个参数，开发者可以通过比较props和nextProps、state和nextState来判断状态到底有没有发生改变，再返回true或false。要注意一下引用的坑。
deprecated — componentWillUpdate(nextProps, nextState)
shouldComponentUpdate生命周期钩子返回true，或者调用this.forceUpdate之后，会立即执行该生命周期钩子。
要特别注意，componentWillUpdate生命周期钩子每次更新前都会执行，所以不能在这里调用setState，有可能会没完没了。
同样，因为Fiber机制的引入，这个生命周期钩子有可能会多次调用。
componentDidUpdate(nextProps, nextState, snapshot)
componentWillUnmount
这是组件卸载之前的生命周期钩子。
React的最佳实践是，组件中用到的事件监听器、订阅器、定时器都要在这里销毁。
componentDidMount() {
document.addEventListener('click', () => {});
}
componentDidCatch
在过去，组件内部的JavaScript错误总是扰乱组件状态以至于在下一次渲染中出现一些奇怪的错误，而且这些错误常常由应用中一些更早的错误引起，然而 React 没有提供一种在组件内部解决这些问题的优雅方案，也不能从错误中恢复。
用户界面某处的 JavaScript 错误不应该使整个 APP 崩溃，为了解决这个问题，React16 引进了一个新的概念 —— Error Boundaries
Error Boundaries 可以捕获在其子组件树里抛出的任何错误，打印这些错误，并且返回一个展示错误的界面而不是崩溃掉的页面。Error Boundaries 可以在渲染过程中、在生命周期方法中、以及其子组件的 constructor 中捕获错误
添加了一个叫做 componentDidCatch(error, info) 的新生命周期方法的组件就叫做 Error Boundaries
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
你仍然可以像正常组件一样使用它
<ErrorBoundary>
<App />
</ErrorBoundary>
componentDidCatch()方法就像是为组件定制的 JavaScript 中的 catch {} 代码块，只有通过 class 定义的组件才能成为 Error Boundaries，在实践中，绝大多数时候你都希望只定义一个 Error Boundary 然后在应用的里使用。
生命周期
React的生命周期钩子，实际上只有三个过程：
- 挂载
- 更新
- 卸载
老生命周期
-
挂载
- constructor
- componentWillMount
- render
-
componentDidMount
挂载
-
更新
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
-
componentDidUpdate
父组件触发`render`
`setState`触发`render`
调用`forceUpdate`触发
-
卸载
- componentWillUnmount
新生命周期
- 挂载
- constructor
- componentWillMount
- render
- componentDidMount
- 更新
-
staticgetDerivedStateFromProps - shouldComponentUpdate
- render
- componentDidUpdate
-
- 卸载
-
componentWillUnmount
new-lifecycle.png
-
最后借一下大佬的图。
