前言：几年不用react，已发生翻天覆地变化，比如生命周期的方法，现在重写学习，记录变化。
组件的生命周期
每个组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。你可以使用此生命周期图谱作为速查表。在下述列表中，常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见。
挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
注意:
下述生命周期方法即将过时，在新代码中应该避免使用它们：
对我来说是新方法：
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。例如，实现 <Transition> 组件可能很方便，该组件会比较当前组件与下一组件，以决定针对哪些组件进行转场动画。
更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
注意:
下述方法即将过时，在新代码中应该避免使用它们：
对我来说是新方法：
componentDidUpdate(prevProps, prevState, snapshot)会在更新后会被立即调用。首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。
componentDidUpdate(prevProps) {
// 典型用法（不要忘记比较 props）：
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，正如上述的例子那样进行处理，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。
卸载
当组件从 DOM 中移除时会调用如下方法：
错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
其他 APIs
组件还提供了一些额外的 API：
class 属性
实例属性
每一个方法的详细参考：
https://react.docschina.org/docs/react-component.html#componentdidmount
标签：生命周期,调用,Component,更新,React,API,props,组件,方法 From： https://www.cnblogs.com/zccst/p/17099969.html