写在前面:
本文源于个人对 React 的兴趣,听闻 React18 的新消息非常开心。但遍历了中文社区之后,其实都是一些总结性的文章,看完之后个人还是处于云里雾里的状态。因此还是自己去翻看了 Discuss,发现英文原文写的非常好,通俗易懂。所以决定在阅读过程中将它们翻译出来,但个人还是更希望大家去看原文,贴近社区。
系列:
正文:
开箱即用的提升(升级到18即可获得的能力):
- 自动批处理(Automactic batching for fewer renders)。
- Suspense 组件的 SSR 支持。
- 修复 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 Component 和 built-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。例如:useMutableSource
和useOpaqueIdentifier
等。我们会在接下来的时间里持续迭代它们,并收集社区中的反馈进行最终的敲定。
这个阶段我们也会持续和社区中较流行的三方包作者们交流沟通,确保他们能够得到 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
流程比较熟悉,我们的工作流程其实是一模一样的,只是增加了一些更有意义的标签。