M

MLOG

中文

探索 React 的并发模式与可中断渲染。了解这一范式转变如何提升应用的性能、响应能力和全球用户体验。

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

在瞬息万变的前端开发领域，用户体验（UX）至高无上。全球用户都期望应用程序快速、流畅且响应迅速，无论其设备、网络状况或手头任务的复杂性如何。像 React 这样的库中的传统渲染机制通常难以满足这些需求，尤其是在资源密集型操作期间或当多个更新争夺浏览器注意力时。这就是 React 的并发模式（现在通常简称为 React 中的并发性）介入的地方，它引入了一个革命性的概念：可中断渲染。这篇博文深入探讨了并发模式的复杂性，解释了可中断渲染的含义、为什么它能改变游戏规则，以及您如何利用它为全球受众构建卓越的用户体验。

理解传统渲染的局限性

在我们深入探讨并发模式的卓越之处前，必须先了解 React 历史上采用的传统同步渲染模型所带来的挑战。在同步模型中，React 以阻塞的方式逐一处理 UI 更新。想象一下您的应用程序是一条单车道高速公路。当一个渲染任务开始时，它必须完成其整个过程，其他任何任务才能开始。这可能导致几个影响用户体验的问题：

考虑一个常见场景：用户正在搜索框中输入，而一个庞大的数据列表正在后台获取和渲染。在同步模型中，列表的渲染可能会阻塞搜索框的输入处理程序，导致打字体验延迟。更糟糕的是，如果列表非常大，整个应用程序可能会感觉被冻结，直到渲染完成。

引入并发模式：一场范式转变

并发模式不是一个传统意义上您需要“开启”的功能；相反，它是 React 的一种新操作模式，它启用了像可中断渲染这样的特性。其核心在于，并发性允许 React 同时管理多个渲染任务，并根据需要中断、暂停和恢复这些任务。这是通过一个复杂的调度器实现的，该调度器根据更新的紧急性和重要性来确定其优先级。

再次以我们的高速公路类比，但这次有多条车道和交通管理。并发模式引入了一个智能的交通控制器，可以：

这种从同步、一次一个的处理方式到异步、优先任务管理的基本转变，正是可中断渲染的精髓所在。

什么是可中断渲染？

可中断渲染是 React 在执行过程中暂停一个渲染任务并在稍后恢复它，或者为了一个新的、更高优先级的更新而放弃部分渲染输出的能力。这意味着一个长时间运行的渲染操作可以被分解成更小的块，React 可以根据需要在这些块和其他任务（如响应用户输入）之间切换。

实现可中断渲染的关键概念包括：

这种“中断”和“恢复”的能力正是 React 并发性如此强大的原因。它确保了即时应用程序正在执行复杂的渲染任务，UI 也能保持响应，并且关键的用户交互能够得到及时处理。

关键特性及其如何实现并发

并发模式解锁了几个基于可中断渲染基础构建的强大功能。让我们来探讨一些最重要的功能：

1. 用于数据获取的 Suspense

Suspense 是一种在 React 组件内处理异步操作（如数据获取）的声明式方式。以前，为多个异步操作管理加载状态可能会变得复杂，并导致嵌套的条件渲染。Suspense 极大地简化了这一点。

它如何与并发协同工作：当一个使用 Suspense 的组件需要获取数据时，它会“挂起”渲染并显示一个后备 UI（例如，一个加载指示器）。React 的调度器可以暂停该组件的渲染而不会阻塞 UI 的其余部分。同时，它可以处理其他更新或用户交互。一旦数据获取完成，该组件就可以用实际数据恢复渲染。这种可中断的特性至关重要；React 不会卡在等待数据上。

全球示例：想象一个全球电子商务平台，东京的一位用户正在浏览产品页面。同时，伦敦的一位用户正在将商品添加到购物车，而纽约的另一位用户正在搜索产品。如果东京的产品页面需要获取详细规格，这需要几秒钟时间，Suspense 允许应用程序的其余部分（如伦敦的购物车或纽约的搜索）保持完全响应。React 可以暂停东京产品页面的渲染，处理伦敦的购物车更新和纽约的搜索，然后在东京页面的数据准备好后恢复它。

代码片段（示例）：

// 想象一个返回 Promise 的 fetchData 函数
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// 一个假设的支持 Suspense 的数据获取钩子
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // 这就是 Suspense 拦截的内容
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // 这个调用可能会挂起
  return 
欢迎, {userData.name}!
;
}

function App() {
  return (
    正在加载用户...
}> ); }

2. 自动批处理

批处理是将多个状态更新分组到单个重新渲染中的过程。传统上，React 只批处理在事件处理程序中发生的更新。在事件处理程序之外（例如，在 promise 或 `setTimeout` 中）发起的更新不会被批处理，导致不必要的重新渲染。

它如何与并发协同工作：在并发模式下，React 会自动批处理所有状态更新，无论它们源自何处。这意味着如果您有多个状态更新接连发生（例如，来自多个异步操作的完成），React 会将它们分组并执行一次重新渲染，从而提高性能并减少多次渲染周期的开销。

示例：假设您正在从两个不同的 API 获取数据。一旦两者都完成，您会更新两个独立的状态。在旧版本的 React 中，这可能会触发两次重新渲染。在并发模式下，这些更新会被批处理，从而实现一次更高效的重新渲染。

3. 过渡 (Transitions)

过渡 (Transitions) 是一个新引入的概念，用于区分紧急更新和非紧急更新。这是实现可中断渲染的核心机制。

紧急更新：这些是需要立即反馈的更新，例如在输入框中打字、点击按钮或直接操作 UI 元素。它们应该感觉是即时的。

过渡更新：这些是可能需要更长时间且不需要立即反馈的更新。例如，点击链接后渲染一个新页面、筛选一个大列表或更新不直接响应点击的相关 UI 元素。这些更新可以被中断。

它如何与并发协同工作：使用 `startTransition` API，您可以将某些状态更新标记为过渡。React 的调度器随后会以较低的优先级处理这些更新，并且如果发生更紧急的更新，可以中断它们。这确保了当一个非紧急更新（如渲染一个大列表）正在进行时，紧急更新（如在搜索框中打字）会被优先处理，从而保持 UI 的响应性。

全球示例：考虑一个旅游预订网站。当用户选择一个新目的地时，可能会触发一系列更新：获取航班数据、更新酒店可用性以及渲染地图。如果用户在初始更新仍在处理时立即决定更改旅行日期，`startTransition` API 允许 React 暂停航班/酒店的更新，处理紧急的日期更改，然后可能根据新日期恢复或重新发起航班/酒店的获取。这可以防止 UI 在复杂的更新序列中冻结。

代码片段（示例）：

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // 将此更新标记为过渡
    startTransition(() => {
      // 模拟获取结果，这可以被中断
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
正在加载结果...
}
      
    
        {results.map(item => (
          
  • {item.name}
    • 
        ))}
      

    

  );
}

4. 库与生态系统集成

并发模式的好处不仅限于 React 的核心功能。整个生态系统都在适应。与 React 交互的库，如路由解决方案或状态管理工具，也可以利用并发性来提供更流畅的体验。

示例：路由库可以使用过渡在页面之间导航。如果用户在当前页面完全渲染之前导航离开，路由更新可以被无缝中断或取消，新的导航将优先处理。这确保用户始终看到他们想要的最新视图。

如何启用和使用并发功能

虽然并发模式是一个基础性的转变，但启用其功能通常很简单，并且通常只需要最少的代码更改，特别是对于新应用程序或在采用像 Suspense 和 Transitions 这样的功能时。

1. React 版本

并发功能在 React 18 及更高版本中可用。请确保您使用的是兼容版本：

npm install react@latest react-dom@latest

2. 根 API (createRoot)

选择使用并发功能的主要方法是在挂载您的应用程序时使用新的 `createRoot` API：

// index.js 或 main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

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

使用 `createRoot` 会自动启用所有并发功能，包括自动批处理、过渡和 Suspense。

注意：旧的 `ReactDOM.render` API 不支持并发功能。迁移到 `createRoot` 是解锁并发性的关键一步。

3. 实现 Suspense

如前所示，Suspense 的实现方式是用一个 <Suspense> 边界包裹执行异步操作的组件，并提供一个 fallback 属性。

最佳实践：

4. 使用过渡 (startTransition)

识别非紧急的 UI 更新并用 startTransition 包裹它们。

何时使用：

示例：对于在表格中显示的庞大数据集的复杂筛选，您可以设置筛选查询状态，然后为表格行的实际筛选和重新渲染调用 startTransition。这确保了如果用户再次快速更改筛选条件，之前的筛选操作可以被安全地中断。

可中断渲染对全球受众的好处

当考虑到具有不同网络条件和设备能力的全球用户群时，可中断渲染和并发模式的优势被进一步放大。

考虑一个全球学生都在使用的语言学习应用。如果一名学生正在下载一个新课程（一个可能耗时较长的任务），而另一名学生正试图回答一个快速的词汇问题，可中断渲染确保了词汇问题能够立即得到回答，即使下载仍在进行中。这对于教育工具至关重要，因为即时反馈对学习至关重要。

潜在挑战与注意事项

虽然并发模式提供了显著的优势，但采用它也涉及一定的学习曲线和一些注意事项：

React 并发性的未来

React 的并发之旅仍在继续。团队在不断完善调度器、引入新的 API 并改善开发体验。像 Offscreen API（允许组件在不影响用户感知 UI 的情况下渲染，可用于预渲染或后台任务）等功能正在进一步扩展并发渲染所能实现的可能性。

随着网络变得日益复杂，用户对性能和响应性的期望持续提高，并发渲染正变得不仅仅是一种优化，而是构建面向全球受众的现代化、引人入胜的应用程序的必需品。

结论

React 并发模式及其核心概念——可中断渲染，代表了我们构建用户界面方式的一次重大演进。通过让 React 能够暂停、恢复和优先处理渲染任务，我们可以创建不仅性能优越，而且响应迅速、适应性强的应用程序，即使在重负载或受限环境下也是如此。

对于全球受众而言，这意味着更公平、更愉悦的用户体验。无论您的用户是通过欧洲的高速光纤连接还是发展中国家的蜂窝网络访问您的应用程序，并发模式都有助于确保您的应用程序感觉快速而流畅。

拥抱像 Suspense 和 Transitions 这样的功能，并迁移到新的根 API，是释放 React 全部潜力的关键步骤。通过理解和应用这些概念，您可以构建真正能取悦全球用户的下一代 Web 应用程序。

要点总结：

立即开始在您的项目中探索并发模式，为每个人构建更快、响应更迅速、更令人愉悦的应用程序。