React生命周期

在 React 中，组件具有一系列的生命周期方法，这些方法允许我们在组件不同的阶段执行特定的操作。以下是 React 组件的生命周期方法：

1. Mounting（挂载阶段）：

   • constructor()：组件的构造函数，在组件被创建时调用，用于初始化状态和绑定方法。
   • static getDerivedStateFromProps(props, state)：在组件实例化和接收到新的属性时调用，用于根据属性值更新状态。
   • render()：必需的方法，用于渲染组件的内容。
   • componentDidMount()：在组件被挂载到 DOM 后调用，用于执行一次性的操作，如网络请求或订阅事件。

2. Updating（更新阶段）：

   • static getDerivedStateFromProps(props, state)：在接收到新的属性时调用，用于根据属性值更新状态。
   • shouldComponentUpdate(nextProps, nextState)：在组件更新前调用，用于决定是否重新渲染组件，默认返回 true。
   • render()：重新渲染组件的内容。
   • getSnapshotBeforeUpdate(prevProps, prevState)：在更新前获取 DOM 的快照，返回值将作为参数传递给 componentDidUpdate。
   • componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后调用，用于执行更新后的操作，如更新 DOM 或进行网络请求。

3. Unmounting（卸载阶段）：

   • componentWillUnmount()：在组件被卸载前调用，用于清理定时器、取消订阅等操作。

4. Error Handling（错误处理阶段）：

   • static getDerivedStateFromError(error)：在子组件发生错误时调用，用于更新状态以显示错误信息。
   • componentDidCatch(error, info)：在子组件发生错误后调用，用于记录错误信息或发送错误报告。

除了上述生命周期方法，React 16.3 版本引入了新的生命周期方法：

• static getDerivedStateFromProps(props, state)：在组件实例化和接收到新的属性时调用，用于根据属性值更新状态。
• getSnapshotBeforeUpdate(prevProps, prevState)：在更新前获取 DOM 的快照，返回值将作为参数传递给 componentDidUpdate。

需要注意的是，从 React 17 开始，一些生命周期方法已经被标记为过时，不再推荐使用，例如 componentWillMount、componentWillReceiveProps 和 componentWillUpdate。取而代之的是使用上述新的生命周期方法。

此外，React Hooks 也提供了一种新的方式来编写组件，不再依赖于类组件和生命周期方法。使用 Hooks，可以在函数组件中使用状态和其他 React 特性，例如 useState、useEffect 等，以实现组件的逻辑和生命周期管理。