React18将会发布些什么?——前置篇

1,619 阅读4分钟

写在前面:

本文源于个人对 React 的兴趣,听闻 React18 的新消息非常开心。但遍历了中文社区之后,其实都是一些总结性的文章,看完之后个人还是处于云里雾里的状态。因此还是自己去翻看了 Discuss,发现英文原文写的非常好,通俗易懂。所以决定在阅读过程中将它们翻译出来,但个人还是更希望大家去看原文,贴近社区。

系列:

  1. React18将会发布些什么?—— 自动批处理篇

正文:

开箱即用的提升(升级到18即可获得的能力):

  1. 自动批处理(Automactic batching for fewer renders)。
  2. Suspense 组件的 SSR 支持。
  3. 修复 Suspense 组件的奇怪行为。

以上的能力只用将React版本升级到18并且使用 New Root API 来挂载根节点即可获得。


Concurrent Features

React18 是第一个选择性的提供了 concurrent 特性的版本,由以下几个api组成:

  • startTransition: 当你的应用处于很重的状态计算渲染的过程中的时候,让你的界面依然能够保持可交互。
  • useDeferredValue: 让你可以选择界面中不那么重要的部分延迟渲染。
  • <SuspenseList />: 让你决定组件渲染并显示的顺序。
  • Streaming SSR with selective hydration: 在SSR的场景中能够让你的页面更快的进入可交互状态。

你可以在你的应用中小范围的尝试使用这些特性,而不需要为整个应用都套上<StrictMode>

注意:如果你比较熟悉 Concurrent Mode,你可以看看这篇文章:What happened to concurrent "mode"


那有关在Suspense中做数据取回的部分呢?

在 React18 中发布了一些跟Suspense相关的基础性工作,但这其中还暂时没有包括数据取回部分的最佳实践。我们认为,完整的解决方案应该包含 Server Componentbuilt-in Cache,但是这些工作仍然在进行当中。所有,我们也许会在 18.x 的某一个版本中跟它见面,这一次的 18.0 并不会有这一部分的特性。


如何升级呢?

无论你正在使用 React16 还是 React17,升级到 React18 都是一样的操作(只需要把根据节点的渲染方式从ReactDOM.render替换成ReactDOM.createRoot)。在升级之后,我们推荐你重新全面测试一下你的应用,以便你能够着手解决因为一些「开箱即用的提升」带来的问题。

对于进一步的升级明细,移步:


更新计划

安装 React18

要安装最新的 React18 alpha 版本,要添加上@alpha标签:

npm install react@alpha react-dom@alpha

我们没有确定具体的发布时间,但我们期望的发布线如下:

  • React18 Alpha(现在可用)
  • React18 Public Beta(数月后)
  • React18 RC(数月后)
  • React18 (RC版本后的2-4周)

Alpha

这是 React18 最初的一个预览版本。我们相信当你看到它的时候,React18 中绝大多数的特性都已经稳定。但是,我们仍有一些需要最终敲定的API。例如:useMutableSourceuseOpaqueIdentifier等。我们会在接下来的时间里持续迭代它们,并收集社区中的反馈进行最终的敲定。

这个阶段我们也会持续和社区中较流行的三方包作者们交流沟通,确保他们能够得到 React18 最新的支持。

在 Alpha 阶段,我们只希望社区中的三方包维护者们以及 React 组成员们来试用 React18 并且进行反馈。

Beta

当我们所有的特性都已经完成,我们会发布 React18 Beta。这个版本中会包含最终敲定的所有新特性以及大变更,但仍可能在其中有一些未被发现的bug。

在这个阶段,我们会邀请更大的社区团队来试用 React18 并进行反馈,以收集并解决余下的bug。

RC

一旦我们完成所有的特性,并且认为它们足够稳定能够发布了,我们就会切换到 RC。在这个版本,我们欢迎所有的开发者们来试用最新的版本,并且认为它能够运行生产版本中了。

Stable

最后,我们将迎来最终发布版本~

发布标签

当我们进入到某个阶段,对应的tag会遵循如下的格式:

  • react@alpha: 18.0.0-alpha-<sha>-<date>
  • react@beta: 18.0.0-alpha-<sha>-<date>

和我们在experimental标签阶段流程类似,我们会在晚上自动发布一个基于sha的带有最新变更的版本。如果你对我们的next流程比较熟悉,我们的工作流程其实是一模一样的,只是增加了一些更有意义的标签。


Refs