慎点！这是一篇很水很水的文章, 抄自react中文文档, 本文详细介绍了react生命周期函数执行顺序, 以及各生命周期函数的含义和具体作用.
不同阶段生命周期函数执行顺序 挂载(Mounting)挂载指的是组件被实例化并插入到dom中
顺序如下:
constructor -> getDerivedStateFromProps -> render -> componentDidMount
更新(Updating)当state变化或者props变化会引起更新
顺序如下:
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
卸载指的是组件被从dom移除
只会执行一个生命周期:
componentWillUnmount
总结这张图形象表示了不同阶段生命周期函数执行顺序.
render() 方法是 class 组件中唯一必须实现的方法。
当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
数组或 fragments。 使得 render 方法可以返回多个元素。
Portals。可以渲染子节点到不同的 DOM 子树中。
字符串或数值类型。它们在 DOM 中会被渲染为文本节点
布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)
render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
注意
如果 shouldComponentUpdate() 返回 false，则不会调用 render()。
constructor()在 React 组件挂载之前，会调用它的构造函数。
通常，在 React 中，在构造函数中只做两件事：
通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例
注意:
在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。
不要在里边调用setState
componentDidMount()componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
在这里可以
setState
操作dom
发请求获取初始数据
注意
你可以在 componentDidMount() 里可以直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理.
componentDidUpdate(prevProps, prevState, snapshot)componentDidUpdate() 会在更新(dom已经更新)后会被立即调用。首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。
你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，正如上述的例子那样进行处理，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。
如果组件实现了 getSnapshotBeforeUpdate() 生命周期（不常用），则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。
componentWillUnmount()componentWillUnmount() 会在组件卸载及销毁之前直接调用。
在这里可以释放资源, 比如清除定时器, removeEventListener
注意
这里边setState是无效的, 不应该调用
不常用的生命周期 shouldComponentUpdate(nextProps, nextState)他的返回值可以决定是否重新渲染, 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
这是一个性能优化的生命周期方法, 只有当你清楚的知道自己在做什么的是使用
static getDerivedStateFromProps(props, state)getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
getSnapshotBeforeUpdate(prevProps, prevState)