React的生命周期总结

React组件的生命周期可以概述为几个关键阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting），以及错误处理。随着React的发展，特别是引入Hooks之后，经典类组件的生命周期方法逐渐被函数组件中的Effect Hooks和新的生命周期方法所替代。以下是对这些阶段及其相关方法的总结：

挂载（Mounting）

• constructor: 类组件中，用于初始化state和绑定this。函数组件无需此步骤。
• static getDerivedStateFromProps: 类组件中，替代componentWillReceiveProps，在初始化和更新时被调用，用于根据props计算state。
• render: 无论何时组件需要更新UI，都会调用此方法来返回JSX元素。
• useEffect: 函数组件中，可用于模拟挂载和更新后的副作用处理，如数据获取、订阅等。带[]依赖项的Effect会在组件挂载后执行一次。

更新（Updating）

• getDerivedStateFromProps: 更新前，基于新的props计算state。
• shouldComponentUpdate: 类组件中，决定组件是否需要因props或state改变而重新渲染。
• render: 更新UI。
• useEffect: 带有非空依赖项数组的Effect会在依赖项改变时执行，用于处理副作用的更新逻辑。

卸载（Unmounting）

• componentWillUnmount: 类组件中，组件将要卸载前清理工作，如取消网络请求、清理定时器等。
• useEffect: 返回的清理函数会在组件卸载前执行，用于清理副作用，如取消订阅。

错误处理

• static getDerivedStateFromError: 类组件静态方法，捕获子组件抛出的错误并返回一个新的state来恢复UI。
• componentDidCatch: 类组件中，捕获渲染期间的错误并执行错误处理逻辑。
• useEffect: 虽然不是直接的错误处理，但在Effect的执行过程中抛出的错误会被React捕获，并可在此进行异常处理。

注意

• 自React 16.3版本起，componentWillMount, componentWillReceiveProps, 和 componentWillUpdate 被标记为不安全的，并最终在React 17中被移除，推荐使用getDerivedStateFromProps和useEffect替代。
• React Hooks（特别是useState, useEffect, useContext等）为函数组件提供了类似生命周期的功能，使得函数组件能够处理状态管理和副作用，从而减少了对类组件的依赖。

随着React的持续发展，理解最新的最佳实践和API变更对于编写高效、可维护的React应用至关重要。