解读官方博客：React18真的来了

「爱情、让人受尽委屈。」 2022-10-06 03:53 113阅读 0赞

9日凌晨1点，`React`官方博客放出`v18`最新进展。

![9af85638b71ee563616d263ca976904f.png][]

## 官方带来的三条消息 ##

在React18工作计划\[1\]这篇博文中，官方带来了三条消息。

1.  `v18`的工作已经在进行中，并且会是下一个主要版本
2.  创建了`v18`工作组，让社区的专家、开发者、库作者先试用`v18`，为社区的众多库前置兼容`CM`(Concurrent Mode)、教育社区做准备

![3570918dcadb73cd4997332ec917fecb.png][]

> 工作组地址\[2\]

1.  发布了`v18 Alpha`版本，以便库作者可以尝试并提供反馈

> 使用v18 Alpha\[3\]

接下来我们解读下消息背后的信息。

## 垫脚石垫的是什么 ##

我们知道，`v17`是**「垫脚石」**版本，用以稳定`CM`。

`CM`之所以难以稳定，一句话概括原因：

> `CM`为`React`带来应用层面的`Breaking Change`，而且是史无前例的

这里带来的工作量包括两部分：

*  为支持`v18`的新特性付出的开发成本
 *  帮社区渐进升级到`v18`付出的开发、沟通成本

### 新特性付出的开发成本 ###

`v18`的主要特性**「流式SSR」**前置依赖**「不同优先级的Suspense」**。

**「不同优先级的Suspense」**前置依赖**「更灵活的CM」**。

这里的灵活指**「优先级」**之间不仅可以单独比较，还能以**「批」**的概念互相比较。

所以**「Andrew」**在`v16.13.1`时需要先完成`lanes`优先级调度算法的开发。

同时，底层支持**「更灵活的CM」**后，也为上层带来了诸如：

*  `startTransition`、`useDeferredValue`这样的`API`，可以让开发者显式的指定`UI`渲染的优先级。

比如：可以利用`useDeferredValue`，根据用户设备性能（qps），实现自动的`debounce`功能。

*  新`API`，比如`OffScreen`（可以理解为`React`版的`keep-alive`）
 *  自动`batchUpdate`，不仅局限在事件回调函数中

### 为社区渐进升级付出的成本 ###

官方还在最新进展中透露，升级到`v18`将不会、或很少的改变现有代码。

原因是：`CM`是可选的（也就是说**「时间切片」**是默认关闭的）。

刚才聊到，`CM`前置依赖**「优先级调度」**，而**「优先级调度」**是在**「时间切片」**这一架构上实现的。

所以，当**「时间切片」**被默认关闭后，现有代码几乎不需要改动就可以平滑升级到`v18`。

![c0535a9dcb4592d183c278255a1bd9e2.png][]

> 可以看到，**「时间切片」**特性被标记为`Umbrella`，代表这一特性会影响很多`API`、架构、库

在`v17`发布时，`React`内部重构了**「事件机制」**。

`React`事件不会冒泡到统一的根节点，而是每个应用（即调用`ReactDOM.render`的节点）的根节点。

![e0f4db42c94fa292c3e4d549df3cf7bb.png][]

这就能让整个应用中的一部分保持现有的`legacy`模式，新的部分启用`CM`，因为这两个子应用是相互独立的。

由于`CM`带来的`Breaking Change`使一大票库都不兼容（比如`mobx`），所以`React`还专门开发了新`API` —— `create-subscription`用于订阅外部依赖。

这也是为什么`v18 Alpha`会优先让库作者使用 —— 库现有的实现在开启`CM`全功能时，有可能不兼容。

## 时间点 ##

当前`v18 Alpha`已经可用。公开的`beta`版会在几个月后发布。

在`beta`版发出后几周后，会发布`RC`版本。

最后，在`RC`版本后至少几周后，稳定版本会发布。

所以整体的预计是：`v18`稳定版年底会到来。

届时，`React`团队的工作重心将放在`Server Components`上。

![954e507a90ced4925ec2a441b1ecbf1c.png][]

### 参考资料 ###

\[1\]

React18工作计划: https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

\[2\]

工作组地址: https://github.com/reactwg/react-18/discussions

\[3\]

使用v18 Alpha: https://github.com/reactwg/react-18/discussions/9

[9af85638b71ee563616d263ca976904f.png]: /images/20221005/76f6b5aab0fa473faa969073c09d5458.png
[3570918dcadb73cd4997332ec917fecb.png]: /images/20221005/df597525d406448a848ad49f152d6d48.png
[c0535a9dcb4592d183c278255a1bd9e2.png]: /images/20221005/e6ab44297ee44780945b33fad52da8e6.png
[e0f4db42c94fa292c3e4d549df3cf7bb.png]: /images/20221005/70e6a07b09934339a1908e5f23756be1.png
[954e507a90ced4925ec2a441b1ecbf1c.png]: /images/20221005/b380a2e186fe44faa7fdb19e8c2377b0.png