react生命周期

生命周期

生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期。在这个生命周期中，有许多可以调用的事件，俗称钩子函数。

生命周期的三个状态

• Mounting: 将组件插入到DOM中
• Updating: 将数据更新到DOM中
• Unmounting: 将组件移除DOM中

生命周期中的钩子函数（方法、事件）

官方文档：https://zh-hans.reactjs.org/docs/react-component.html

这是官方16.4版本的生命周期，灰色为不常用的生命周期，还有一些生命周期弃用或者改名了

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

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

注意: 下述生命周期方法即将过时，在新代码中应该避免使用它们： UNSAFE_componentWillMount()

更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

注意: 下述生命周期方法即将过时，在新代码中应该避免使用它们： UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()

卸载
当组件从 DOM 中移除时会调用如下方法：

• componentWillUnmount()

错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

常用的生命周期方法

1. componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
2. componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

注意：如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()

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

不常用的生命周期方法

1. 根据 shouldComponentUpdate() 的返回值（布尔值），判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
2. getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
3. getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。