@@ -14,9 +14,9 @@ React 18 现在可以在 npm 上使用啦!在我们的上一篇文章里,我
14
14
15
15
---
16
16
17
- 我们最新的主要版本更新的内容包括自动批处理等开箱即用能力优化, ` startTransition ` 等新的 API,还有支持 Suspense 的流式服务端渲染。
17
+ 我们最新的主要版本包含了开箱即用的改进,如自动批处理、 ` startTransition ` 等新 API,以及支持 Suspense 的流式服务端渲染。
18
18
19
- 这些 React 18 新功能很多都基于我们新推出的并发渲染特性 ,也就是一种解锁全新能力的底层变动。并发模式 React 是选择性启用的——只有当你使用了一个并发功能的时候才会开启——但是我们认为它将会对人们构建应用的方式产生巨大的影响。
19
+ React 18 的许多新功能都建立在新推出的并发渲染特性之上 ,也就是一种解锁全新能力的底层变动。并发模式 React 是选择性启用的——只有当你使用了一个并发功能的时候才会开启——但是我们认为它将会对人们构建应用的方式产生巨大的影响。
20
20
21
21
我们花了很多年时间来研发 React 的并发渲染,同时我们也还考虑为现有用户提供一种过渡的路径。去年夏天,[ 我们成立了 React 18 工作组] ( /blog/2021/06/08/the-plan-for-react-18 ) 来收集社区专家们的反馈信息,保证整个 React 生态都能有一个丝滑的升级体验。
22
22
@@ -36,33 +36,33 @@ React 18 现在可以在 npm 上使用啦!在我们的上一篇文章里,我
36
36
37
37
## 什么是并发 React? {/* what-is-concurrent-react* /}
38
38
39
- React 18 中最重要的更新内容是我们不会要求你过度关注的 :并发。我们认为这对于应用开发者而言是一件非常好的事情,尽管这对于库的维护者来说可能有点复杂。
39
+ React 18 中最重要的更新内容是我们希望你永远不会考虑的 :并发。我们认为这对于应用开发者而言是一件非常好的事情,尽管这对于库的维护者来说可能有点复杂。
40
40
41
- 并发渲染本身并不是一个功能。它是一个新的底层机制,使得 React 能够同时准备多个版本的 UI。你可以把并发视为一种底层实现的细节——由于它解锁的新功能的缘故,它会非常有价值 。React 在底层实现上使用了非常高级的技术,像优先队列和多级缓冲。但是你不会在任何开放的 API 中感知到这些。
41
+ 并发渲染本身并不是一个功能。它是一个新的底层机制,使得 React 能够同时准备多个版本的 UI。你可以把并发视为一种底层实现的细节——它解锁了许多新功能因而非常有价值 。React 在底层实现上使用了非常复杂的技术,如优先队列和多级缓冲。但是你不会在任何公共 API 中感知到这些。
42
42
43
- 我们设计 API 的时候,刻意隐藏了实现细节 。作为一名 React 开发者,你只需要关注视图是 ** 什么** 样子,然后由 React 来处理 ** 如何** 来实现。 所以我们不需要 React 开发者知道底层运行原理 。
43
+ 在设计 API 时,我们刻意隐藏了实现细节 。作为一名 React 开发者,你只需要关注视图是 ** 什么** 样子,然后由 React 来处理 ** 如何** 来实现, 所以我们不需要 React 开发者了解并发的底层运行原理 。
44
44
45
- 不过,并发模式 React 这一更新本身是比其实现细节更重要 ──它是 React 核心渲染模型的基础性更新。因此,知道并发渲染底层工作原理不是很重要 ,但如果是为了追求更高的技术层次,倒是可能值得去了解它 。
45
+ 不过,并发模式 React 比典型的实现细节更重要 ──它是 React 核心渲染模型的基础性更新。因此,尽管了解并发渲染底层工作原理不是很重要 ,但如果是为了追求更高的技术层次,倒是值得去了解它 。
46
46
47
- 并发模式 React 的一个主要特性是渲染可以被中断。当你第一次升级到 React 18,在加入任何并发功能之前,更新内容渲染的方式和 React 之前的版本一样——通过一个单一的、同步且不可中断的事务进行处理 。同步渲染意味着,一旦开始渲染就无法中断,直到用户可以在屏幕上看到渲染结果。
47
+ 并发模式的一个关键特性是渲染可中断。当首次升级到 React 18,在加入任何并发功能之前,更新内容渲染的方式和 React 之前的版本一样——通过一个单一的且不可中断的同步事务进行处理 。同步渲染意味着,一旦开始渲染就无法中断,直到用户可以在屏幕上看到渲染结果。
48
48
49
- 在并发渲染中,情况并不总是这样 。React 可能开始渲染一个更新,然后中途挂起,稍后又继续。它甚至可能完全放弃一个正在进行的渲染。React 保证即使渲染被中断,UI 也会呈现出一致性 。为了实现这一点,它会在整个 DOM 树被计算完毕前一直等待,完毕后执行 DOM 变更。这样做,React 就可以在后台提前准备新的屏幕内容,而不阻塞主线程。这意味着用户输入可以被立即响应,即使存在大量渲染任务,也能有流畅的用户体验。
49
+ 在并发渲染中,情况并不总是如此 。React 可能开始渲染一个更新,然后中途挂起,稍后又继续。它甚至可能完全放弃一个正在进行的渲染。React 保证即使渲染被中断,UI 也会保持一致 。为了实现这一点,它会在整个 DOM 树被计算完毕前一直等待,完毕后再执行 DOM 变更。这样做,React 就可以在后台提前准备新的屏幕内容,而不阻塞主线程。这意味着用户输入可以被立即响应,即使存在大量渲染任务,也能有流畅的用户体验。
50
50
51
- 另一个例子是可重用状态。并发 React 可以从屏幕中移除部分 UI,之后将它们再添加回来 ,并重用之前的状态。例如,当一个用户标签页切出又切回 ,React 应该能够立即将之前的屏幕恢复到它先前的状态 。在即将到来的次要版本中,我们计划添加一个新的名为 ` <Offscreen> ` 的组件,它实现了这种模式。同样地,你将能够使用 Offscreen 在后台准备新的 UI,在显示前就准备完毕以便快速响应。
51
+ 另一个例子是可重用状态。并发 React 可以从屏幕中移除部分 UI,然后在稍后将它们再添加回来 ,并重用之前的状态。例如,当用户来回切换标签页 ,React 应该能够立即将屏幕恢复到它先前的状态 。在即将到来的次要版本中,我们计划添加一个新的名为 ` <Offscreen> ` 的组件,它实现了这种模式。同样地,你将能够使用 Offscreen 在后台准备新的 UI,在显示前就准备完毕以便快速响应。
52
52
53
53
并发渲染是一个 React 中非常强大的工具,并且我们大多数新功能都是利用了它的优势来创建的,包括 Suspense,transition 和流式服务端渲染。但是在并发渲染这个方向,React 18 也仅仅只是实现我们最终目标的第一步。
54
54
55
- ## 渐进地采用并发特性 {/* gradually-adopting-concurrent-features* /}
55
+ ## 渐进式采用并发特性 {/* gradually-adopting-concurrent-features* /}
56
56
57
- 从技术上讲,并发渲染是一个破坏性变更。因为并发渲染是可中断的,当它启用时,组件行为会略微不同 。
57
+ 从技术上讲,并发渲染是一个破坏性变更。因为并发渲染是可中断的,因此在并发模式下组件的行为会略微不同 。
58
58
59
59
在我们的测试过程中,我们已经把几千个组件更新到了 React 18。我们发现,几乎所有现有的组件都能在并发渲染下“正常工作”。然而部分组件可能需要一些额外的迁移工作。这种变化通常很小,你仍然可以按照自己的节奏进行使用。React 18 中的新渲染行为 ** 只在你的应用中使用新功能的部分启用** 。
60
60
61
- 整体上的升级方案是使你的应用基于 React 18 运行而不用破坏现存的代码。 然后你可以渐进地按照你的节奏开始添加并发功能。你可以在开发环境中使用 [ ` <StrictMode> ` ] ( /reference/react/StrictMode ) 以利于暴露并发模式相关的问题。严格模式是不影响生产环境的,但是在开发环境中它将会上外额外的警告日志 ,并且被视为幂等的函数将被调用两次。这没办法捕获所有异常,但是能够有效预防大部分常见的错误类型。
61
+ 整体的升级策略是使你的应用基于 React 18 运行而不用破坏现存的代码, 然后你可以渐进地按照你的节奏开始添加并发功能。你可以在开发环境中使用 [ ` <StrictMode> ` ] ( /reference/react/StrictMode ) 以利于暴露并发模式相关的问题。严格模式是不影响生产环境的,但是在开发环境中它将会记录额外的警告日志 ,并且被视为幂等的函数将被调用两次。这没办法捕获所有异常,但是能够有效预防大部分常见的错误类型。
62
62
63
- 在你升级到 React 18 后,你可以立即开始使用并发模式的功能 。例如,你可以使用 ` startTransition ` 在屏幕内容之间进行导航,而不会阻塞用户输入。 或者使用 ` useDeferredValue ` 来节流处理开销巨大的重渲染 。
63
+ 在升级到 React 18 后,可以立即开始使用并发模式的功能 。例如,你可以使用 ` startTransition ` 在屏幕内容之间进行导航,而不会阻塞用户输入; 或者使用 ` useDeferredValue ` 来节流处理开销巨大的重新渲染 。
64
64
65
- 无论如何 ,我们希望你在应用中添加并发渲染能力的主要方式是,使用一个支持并发渲染的库或者框架 。在大多数情况中,你不用与并发模式的 API 直接交互。例如,在导航到一个新的屏幕时,开发者无需调用 ` startTransition ` ,路由库会自动将导航操作包裹在 ` startTransition ` 中。
65
+ 长远来看 ,我们希望你在应用中添加并发渲染能力的主要方式是,使用支持并发渲染的库或者框架 。在大多数情况中,你不用与并发模式的 API 直接交互。例如,在导航到一个新的屏幕时,开发者无需调用 ` startTransition ` ,路由库会自动将导航操作包裹在 ` startTransition ` 中。
66
66
67
67
这些库升级到兼容并发模式可能需要一些时间。我们已经提供了新的 API,使这些库更容易利用并发功能。同时,在我们努力逐步迁移 React 生态系统的过程中,请对维护者保持耐心。
68
68
0 commit comments