React 生命周期(16.4版本)

React 生命周期可以分为三部分

生命周期16.4

一、挂载时

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下:

• constructor()
• static getDerivedStateFromProps() (不常用)
• render()
• componentDidMount()

二、更新时

• static getDerivedStateFromProps() (不常用)
• shouldComponentUpdate() (不常用)
• render()
• getSnapshotBeforeUpdate() (不常用)
• componentDidUpdate()

三、卸载时

• componentWillUnmount()

下面是生命周期的简介

---

constructor()

在 React 组件挂载之前，会调用它的构造函数。
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
注意⚠️在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug

getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用。
并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

render()

render() 方法是 class 组件中唯一必须实现的方法
render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互
注意⚠️如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考

componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
此时 Virtual DOM 渲染完成。
此方法只会初始化一次，依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅。

---

shouldComponentUpdate(nextProps, nextState)

此方法仅作为性能优化的方式而存在。
根据 shouldComponentUpdate() 的返回值(true: 执行 render(), false: 不重新渲染)，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()
注意⚠️ 后续版本，React 可能会将 shouldComponentUpdate 视为提示而不是严格的指令，并且，当返回 false 时，仍可能导致组件重新渲染。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。
它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
应返回 snapshot 的值（或 null），返回值会在componentDidUpdate(prevProps, prevState, snapshot)中的第三个参数。

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。
首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。

---

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。