React 并发模式：揭秘可中断渲染以增强用户体验

React 并发模式代表了 React 应用渲染方式的重大转变，引入了可中断渲染的概念。这从根本上改变了 React 处理更新的方式，使其能够优先处理紧急任务，即使在重负载下也能保持用户界面的响应性。本篇博客文章将深入探讨并发模式的复杂性，探索其核心原则、实现细节以及为全球受众构建高性能 Web 应用的实际好处。

理解并发模式的需求

传统上，React 在现在被称为“传统模式”或“阻塞模式”下运行。在这种模式下，当 React 开始渲染更新时，它会同步地、不间断地进行，直到渲染完成。这可能会导致性能问题，尤其是在处理复杂组件或大型数据集时。在长时间的同步渲染期间，浏览器会变得无响应，导致用户感觉到延迟和糟糕的用户体验。想象一下，一个用户在与一个电子商务网站互动，试图筛选产品，并且每次互动都会经历明显的延迟。这可能会令人非常沮丧，并可能导致用户放弃网站。

并发模式通过使 React 能够将渲染工作分解为更小、可中断的单元来解决这个限制。这使得 React 可以根据优先级暂停、恢复甚至放弃渲染任务。高优先级的更新，如用户输入，可以中断正在进行的低优先级渲染，从而确保流畅且响应迅速的用户体验。

并发模式的核心概念

1. 可中断渲染

并发模式的核心原则是能够中断渲染。React 不会阻塞主线程，而是可以暂停渲染一个组件树来处理更紧急的任务，例如响应用户输入。这是通过一种称为协作式调度的技术实现的。React 在完成一定量的工作后将控制权交还给浏览器，允许浏览器处理其他事件。

2. 优先级

React 为不同类型的更新分配优先级。用户交互，如打字或点击，通常比后台更新或不太关键的 UI 变更具有更高的优先级。这确保了最重要的更新被首先处理，从而带来更具响应性的用户体验。例如，即使有其他后台进程正在更新产品目录，在搜索栏中输入也应该始终感觉是即时的。

3. Fiber 架构

并发模式建立在 React Fiber 之上，这是对 React 内部架构的完全重写。Fiber 将每个组件表示为一个 fiber 节点，允许 React 跟踪更新组件所需的工作并相应地确定其优先级。Fiber 使 React 能够将大型更新分解为更小的工作单元，从而使可中断渲染成为可能。可以将 Fiber 视为 React 的一个详细的任务管理器，使其能够有效地调度和优先处理不同的渲染任务。

4. 异步渲染

并发模式引入了异步渲染技术。React 可以开始渲染一个更新，然后暂停它以执行其他任务。当浏览器空闲时，React 可以从中断的地方继续渲染。这使得 React 可以有效地利用空闲时间，提高整体性能。例如，当用户仍在与当前页面交互时，React 可能会预渲染多页应用中的下一个页面，从而提供无缝的导航体验。

5. Suspense

Suspense 是一个内置组件，它允许您在等待异步操作（如获取数据）时“暂停”渲染。Suspense 可以在数据加载时显示一个备用 UI，而不是显示空白屏幕或加载指示器。这通过提供视觉反馈并防止 UI 感觉无响应来改善用户体验。想象一个社交媒体信息流：当从服务器获取实际内容时，Suspense 可以为每个帖子显示一个占位符。

6. 过渡 (Transitions)

过渡 (Transitions) 允许您将更新标记为非紧急。这告诉 React 优先处理其他更新，例如用户输入，而不是这个过渡。过渡对于创建平滑且视觉上吸引人的过渡效果非常有用，而不会牺牲响应性。例如，在 Web 应用中的页面之间导航时，您可以将页面切换标记为一个过渡，从而允许 React 优先处理新页面上的用户交互。

使用并发模式的好处

• 提高响应性：通过允许 React 中断渲染并优先处理紧急任务，并发模式显著提高了应用的响应性，尤其是在重负载下。这带来了更流畅、更愉悦的用户体验。
• 增强用户体验：使用 Suspense 和过渡 (Transitions) 可以创建更具视觉吸引力和用户友好的界面。即使用户在处理异步操作时，也能看到对其操作的即时反馈。
• 更好的性能：并发模式允许 React 更有效地利用空闲时间，从而提高整体性能。通过将大型更新分解为更小的工作单元，React 可以避免阻塞主线程并保持 UI 的响应性。
• 代码分割和懒加载：并发模式与代码分割和懒加载无缝协作，允许您仅加载当前视图所需的代码。这可以显著减少应用的初始加载时间。
• 服务器组件（未来）：并发模式是服务器组件（Server Components）的先决条件，这是一个允许您在服务器上渲染组件的新功能。服务器组件可以通过减少需要在客户端下载和执行的 JavaScript 数量来提高性能。

在您的 React 应用中实现并发模式

在您的 React 应用中启用并发模式相对简单。该过程取决于您是使用 Create React App 还是自定义构建设置。

使用 Create React App

如果您正在使用 Create React App，您可以通过更新您的 `index.js` 文件来使用 `createRoot` API，而不是 `ReactDOM.render` API，从而启用并发模式。

// 之前：
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

// 之后：
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render();

使用自定义构建设置

如果您正在使用自定义构建设置，您需要确保您使用的是 React 18 或更高版本，并且您的构建配置支持并发模式。您还需要更新您的 `index.js` 文件以使用 `createRoot` API，如上所示。

使用 Suspense 进行数据获取

要充分利用并发模式，您应该使用 Suspense 进行数据获取。这允许您在数据加载时显示一个备用 UI，防止 UI 感觉无响应。

这是一个使用 Suspense 和一个假设的 `fetchData` 函数的例子：

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // 假设 fetchData() 返回一个类似 Promise 的对象
 return (
  

   
{data.title}
   
{data.description}
  
 );
}

function App() {
 return (
  Loading...

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  

   
   
Value: {value}
   {isPending && 
Updating...
}
  
 );
}

export default MyComponent;