跳到主要内容

React 18 并发(Concurrent)渲染的入门指南

· 阅读需 7 分钟

前言

目前 React 领域最热门的话题是 React 18 版本。 特别是,该版本将引入一组所谓的并发渲染功能。 这些特性允许开发者选择 React 的并发渲染机制。 这种机制为 React 开发人员提供了一个全新的机会来控制和优化最终用户的体验。 这绝对是自 hooks 以来,我们在 React 世界中将收到的最令人兴奋的事情之一。

因此,你很可能以前听说过并发渲染。 可能是关于它的文章、围绕它的 API,或者 React 18 将为它带来什么。 但是,你可能会对并发渲染的基础知识感到疑惑。 究竟什么是并发渲染,为什么我们真的需要它?

为了帮助你理解,本文将讨论这些问题。 通过研究它的目的、它试图解决什么问题以及它是如何解决它的,你将获得有关并发渲染主题的基础知识。

为什么我们需要并发渲染?

React 当前形式的问题之一是所有状态更新都是同步的。 这意味着 React 只能一一处理它们。 在许多用例和现实生活场景中,这非常好,不会对用户体验施加任何限制。

但是在 React 想要获取与其当前正在处理的状态更新不同的状态更新的情况下,现在这显然是不可能的。 React 在启动后无法中断、暂停或放弃渲染更新——这是一个阻塞的进程。

从本质上讲,这对优化用户体验的过程设置了上限。 虽然很高,但还是有上限的。 每个状态更新都被视为同等重要,即使这不适用于用户体验。 某些更新可能比其他更新具有更高的优先级或紧迫性。 与可能的情况相比,不能这样做实际上会对用户体验产生巨大的负面影响,这是次优的。

什么是并发渲染?

并发渲染是一组功能,允许你的 React 项目选择所谓的可中断渲染。 与之前 React 被阻塞的渲染过程相反,这使得渲染过程可以从 React 端中断,这正是并发渲染的用武之地。这为 React 开发人员进一步提升 React 应用程序的用户体验开辟了许多新的可能性。

它允许 React 一次处理多个状态更新。 然而,这并不意味着 React 会突然同时执行所有排队状态更新。 相反,选择并发渲染允许 React 考虑其最佳行动方案。 幸运的是,这也是我们作为开发人员可以控制的事情。

假设 React 当前正在处理状态更新并且有一个不同的更新进来,那么 React 可以根据变量的因素做出不同的决定。 如果新的传入状态更新被标记为同等或不那么紧急,那么与之前的渲染过程相比没有任何变化。 React 将像往常一样继续当前状态更新。 完成后,它将获取新的状态更新。

但是如果新传入的状态更新被标记为更紧急,那么 React 可以决定暂停当前状态更新并首先处理传入的更新。 在完成新的更紧急的状态更新后,React 会回到原来的状态更新。 如果它确定有必要恢复它,它会这样做。 如果事实证明状态更新现在无关紧要,它可以决定完全放弃它。

下一步是什么?

本文简要介绍了 React 18 将为 React 开发领域带来的最激动人心的功能之一,即并发渲染,并让你快速了解整个主题。 使用本文中的知识,你应该知道什么是并发渲染,了解它试图解决的问题,并大致了解它的工作原理。

幸运的是,并发渲染并不止于此。 虽然并发渲染还有很多方面需要理解或深入研究,但本文作为介绍以进入整个主题,并允许你从这里开始进一步探索 React 18。

下面准备了一些资料 这里介绍了 React 18 中引入的三个新 API。所有这些 API 都是允许某些开发人员在某些场景中选择并发渲染的hook。 官方的 React 18 公告是了解更多关于 React 18、不同特性、如何采用它以及关于即将发布的 React 版本的所有信息的好地方。 React 工作组是了解更多技术方面、获得更多指导、了解不同 API 和特性背后的思维过程以及总体上更深入地了解 React 18 中所有内容的好地方。 这就是全部! 现在你已经牢牢掌握了并发渲染的主题,在 React 18 中为你打开了一个全新的世界供你探索。走出去,探索并享受这个新的冒险!