当前位置：首页 > article >正文

React 18 生命周期详解与并发模式下的变化

article 2025/9/5 18:02:14

1. React 生命周期概述

React 组件的生命周期可以分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting），以及错误处理阶段。

1.1. 挂载阶段（Mounting）

1. constructor(props)

这是组件的构造函数，用于初始化 state 或绑定方法。在 React 18 中，其行为保持不变。

2. static getDerivedStateFromProps(nextProps, prevState)

这是一个静态方法，用于从 props 派生 state。在 React 18 中几乎没有变化，仍然是一个不常用的生命周期方法。

3. render()

这是必须实现的方法，负责返回要渲染的 React 元素。

4. componentDidMount()

组件挂载后立即调用，是执行副作用操作（如数据获取）的理想位置。在 Concurrent Mode 下，此方法可能会被分割和暂停，但最终仍会被完整调用一次。

1.2. 更新阶段（Updating)

1. static getDerivedStateFromProps(nextProps, prevState)

在更新阶段再次调用，保持与挂载阶段相同的功能。

2. shouldComponentUpdate(nextProps, nextState)

通过返回 true 或 false 来决定组件是否需要重新渲染，是性能优化的重要手段。

3. render()

根据新的 props 或 state 重新渲染组件。

4. getSnapshotBeforeUpdate(prevProps, prevState)

在 DOM 更新前捕获一些信息（如滚动位置），返回值将作为参数传递给 componentDidUpdate。

5. componentDidUpdate(prevProps, prevState, snapshot)

组件更新完成后调用，可以响应 DOM 变化或执行新的数据请求。

1.3. 卸载阶段（Unmounting）

1. componentWillUnmount()

在组件卸载前调用，用于执行清理操作，如取消网络请求或清除定时器。

1.4. 错误处理

1. static getDerivedStateFromError(error)

当子组件抛出错误时被调用，用于渲染备用 UI。

2. componentDidCatch(error, errorInfo)

用于记录错误信息或执行其他副作用操作。

2. React 18 的重要升级

2.1. Concurrent Mode（并发模式）

React 18 引入了革命性的 Concurrent Mode，这使得 React 可以：

1. 打断正在进行的渲染工作；

2. 优先处理更高优先级的更新；

3. 在后台准备多个版本的 UI；

这对生命周期的影响是：像 componentDidMount 和 componentDidUpdate 这样的方法可能会被分割执行，但最终仍会完整调用一次。

2.2. 自动批处理

React 18 改进了状态更新的批处理机制：

1. 现在自动批处理所有状态更新，而不仅限于浏览器事件；

2. 减少了不必要的重新渲染；

3. 提升了应用性能；

这意味着在 setTimeout、Promise 等异步回调中的多个状态更新也会被自动合并。

2.3. 新 Hook 的引入

React 18 提供了新的 Hook 来处理并发特性：

1. useTransition：标记某些更新为"可中断"，不会阻塞 UI；

2. useDeferredValue：延迟更新某些值，优先处理更重要的更新；

3. 示例代码解析

import React, { useState, useEffect } from 'react';function MyComponent() {const [data, setData] = useState(null);useEffect(() => {// 相当于 componentDidMountfetch('/api/data').then(response => response.json()).then(data => setData(data));return () => {// 相当于 componentWillUnmount// 执行清理工作};}, []); // 空依赖数组表示只在挂载和卸载时运行return (<div>{data ? data : 'Loading...'}</div>);
}export default MyComponent;

这个示例展示了如何使用 Hook 来替代传统的生命周期方法：

1. useState 管理组件状态；

2. useEffect 处理副作用：

(1). 空依赖数组时，相当于 componentDidMount（执行）和 componentWillUnmount（清理函数）；

(2). 可以替代大部分生命周期场景；

3. 函数式组件更简洁，更符合现代 React 开发模式；