react之生命周期

生命周期

React 组件的生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。在不同的生命周期阶段，React 组件会调用不同的生命周期方法。以下是基于 React 16.3+ 版本（引入了新的getDerivedStateFromProps和getSnapshotBeforeUpdate生命周期方法）的组件生命周期概述。

挂载（Mounting）

这个阶段是将组件插入到 DOM 中的过程。它包含以下方法：

1. constructor()
   构造函数，最先被执行，用于初始化状态和绑定事件处理器。

2. static getDerivedStateFromProps(props, state)
   当接收到新的属性（props）来更新组件状态之前被调用。用于将组件的状态依赖于其属性。

3. render()
   必须实现的方法，用于返回组件要渲染的内容。它不应该修改组件状态，也不直接与浏览器交互。

4. componentDidMount()
   在组件被挂载到 DOM 后立即调用。这是发起网络请求、设置事件监听器等操作的好地方。

更新（Updating）

当组件的 props 或 state 发生变化时，会进入更新阶段。这个阶段包括以下方法：

1. static getDerivedStateFromProps(props, state)
   此方法与挂载阶段相同，也会在更新时调用，用于根据新的 props 来更新 state。

2. shouldComponentUpdate(nextProps, nextState)
   决定组件是否应该进行更新。返回 false 可以阻止更新。

3. render()
   更新阶段也会调用 render 方法来确定是否需要重新渲染组件。

4. getSnapshotBeforeUpdate(prevProps, prevState)
   在最新的渲染输出被提交到 DOM 前立即调用，用于捕获渲染前的 DOM 状态。

5. componentDidUpdate(prevProps, prevState, snapshot)
   更新完成后被调用，此时可以执行如 DOM 操作或者执行更多网络请求。

卸载（Unmunting）

当组件从 DOM 中移除时，会进入卸载阶段。它包含以下方法：

1. componentWillUnmount()

当组件即将从 DOM 中卸载及销毁之前调用，用于执行必要的清理操作，如取消网络请求、清除定时器等。

错误处理

React 16 引入了错误边界（Error Boundary）的概念，可以捕获并处理子组件树中的 JavaScript 错误，防止整个应用崩溃。错误边界相关的生命周期方法包括：

1. static getDerivedStateFromError(error)
   当子组件抛出错误时被调用，返回值将作为状态被用于下一次渲染。

2. componentDidCatch(error, info)
   当子组件抛出错误时被调用，用于记录错误信息。