React生命周期

深入详解React生命周期
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

挂载-更新-卸载

1. 挂载

constructor

constructor() 在React组件挂载之前被调用，在为React.Component子类实现构造函数时，应在其他语句之前调用 super()。

static getDerivedStateFromProps(nextProps, state)

getDerivedStateFromProps() 在调用 render方法之前调用，在初始化和后续更新都会被调用。
参数：第一个参数为即将更新的 props, 第二个参数为上一个状态的 state , 可以比较props 和 state来加一些限制条件，防止无用的state更新。
返回：返回一个对象来更新 state, 如果返回 null 则不更新任何内容

render

用于渲染dom, render()方法必须返回reactDOM

componentDidMount

componentDidMount() 在组件挂载后 (插入DOM树后) 立即调用，componentDidMount() 是发送网络请求、启用事件监听方法的好时机，并且可以在 此钩子函数里直接调用 setState()

2. 更新

static getDerivedStateFromProps()

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() 在组件更新之前调用，可以控制组件是否进行更新， 返回true时组件更新， 返回false则不更新。
参数：包含两个参数，第一个是即将更新的 props 值，第二个是即将跟新后的 state 值，可以根据更新前后的 props 或 state 来比较加一些限制条件，决定是否更新，进行性能优化
不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能
不要 shouldComponentUpdate 中调用 setState()，否则会导致无限循环调用更新、渲染，直至浏览器内存崩溃

render

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次的渲染输出被提交之前调用。也就是说，在 render 之后，即将对组件进行挂载时调用。

它可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），此生命周期返回的任何值都会作为参数传递给 componentDidUpdate()。如不需要传递任何值，那么请返回 null

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行
参数：包含三个参数，第一个是上一次props值。 第二个是上一次state值。如果组件实现了 getSnapshotBeforeUpdate() 生命周期（不常用），第三个是“snapshot” 参数传递

3. 卸载

componentWillUnmount

componentWillUnmount() 在组件即将被卸载或销毁时进行调用。
是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机

案例参考原链接