React 生命周期有哪些

React 组件的生命周期可以分为几个阶段，每个阶段都有对应的生命周期方法或生命周期钩子。React 16.3 版本引入了新的生命周期方法，并且在 React 16.8 版本中引入了函数组件的 Hooks，这让生命周期的概念对于类组件和函数组件有所不同。

类组件（Class Components）

对于类组件而言，React 提供了以下生命周期方法：

1. 挂载阶段 (Mounting)

   • constructor(): 构造函数，在实例创建和调用 render 方法之前立即被调用。
   • static getDerivedStateFromProps(props, state): 静态方法，当组件接收到新的 props 时会被调用。
   • render(): 负责返回一个 React 元素树。
   • componentDidMount(): 在首次渲染完成后立即调用。

2. 更新阶段 (Updating)

   • static getDerivedStateFromProps(props, state): 如果组件的 props 发生变化，此方法会被调用。
   • shouldComponentUpdate(nextProps, nextState): 返回一个布尔值来指示是否需要更新组件。
   • render(): 每次更新时都会调用。
   • getSnapshotBeforeUpdate(prevProps, prevState): 在更新发生之前立即调用。
   • componentDidUpdate(prevProps, prevState, snapshot): 在更新完成后立即调用。

3. 卸载阶段 (Unmounting)

   • componentWillUnmount(): 在组件被卸载并从 DOM 中移除之前立即调用。

函数组件（Function Components）使用 Hooks

对于函数组件，可以使用不同的 Hook 来管理状态和生命周期：

• useState(): 用于添加组件的状态。
• useEffect(): 可以处理副作用操作，比如数据获取、订阅或者手动更改 DOM，它接受一个回调函数和一个依赖数组。这个 Hook 会在组件挂载、更新和卸载时执行。
• useContext(): 用于消费最近的 context 值。
• useReducer(): 和 useState() 类似，但是允许使用 Reducer 来管理复杂的状态。
• useCallback(), useMemo(), useRef() 等其他 Hooks: 这些都是优化工具，帮助控制函数组件的行为和性能。

这些是 React 组件生命周期的基本概述。需要注意的是，React 的版本更新可能会带来一些变化，因此建议查阅最新的官方文档来获取最新的信息。