[[405754]]

 9日凌晨1點(diǎn)，React官方博客放出v18最新進(jìn)展。

官方帶來的三條消息

在React18工作計(jì)劃[1]這篇博文中，官方帶來了三條消息。

1.v18的工作已經(jīng)在進(jìn)行中，并且會(huì)是下一個(gè)主要版本

2.創(chuàng)建了v18工作組，讓社區(qū)的專家、開發(fā)者、庫作者先試用v18，為社區(qū)的眾多庫前置兼容CM(Concurrent Mode)、教育社區(qū)做準(zhǔn)備

工作組地址[2]

3.發(fā)布了v18 Alpha版本，以便庫作者可以嘗試并提供反饋

使用v18 Alpha[3]

接下來我們解讀下消息背后的信息。

墊腳石墊的是什么

我們知道，v17是「墊腳石」版本，用以穩(wěn)定CM。

CM之所以難以穩(wěn)定，一句話概括原因：

CM為React帶來應(yīng)用層面的Breaking Change，而且是史無前例的

這里帶來的工作量包括兩部分：

• 為支持v18的新特性付出的開發(fā)成本
• 幫社區(qū)漸進(jìn)升級(jí)到v18付出的開發(fā)、溝通成本

新特性付出的開發(fā)成本

v18的主要特性「流式SSR」前置依賴「不同優(yōu)先級(jí)的Suspense」。

「不同優(yōu)先級(jí)的Suspense」前置依賴「更靈活的CM」。

這里的靈活指「優(yōu)先級(jí)」之間不僅可以單獨(dú)比較，還能以「批」的概念互相比較。

所以「Andrew」在v16.13.1時(shí)需要先完成lanes優(yōu)先級(jí)調(diào)度算法的開發(fā)。

同時(shí)，底層支持「更靈活的CM」后，也為上層帶來了諸如：

• startTransition、useDeferredValue這樣的API，可以讓開發(fā)者顯式的指定UI渲染的優(yōu)先級(jí)。

比如：可以利用useDeferredValue，根據(jù)用戶設(shè)備性能(qps)，實(shí)現(xiàn)自動(dòng)的debounce功能。

• 新API，比如OffScreen(可以理解為React版的keep-alive)
• 自動(dòng)batchUpdate，不僅局限在事件回調(diào)函數(shù)中

為社區(qū)漸進(jìn)升級(jí)付出的成本

官方還在最新進(jìn)展中透露，升級(jí)到v18將不會(huì)、或很少的改變現(xiàn)有代碼。

原因是：CM是可選的(也就是說「時(shí)間切片」是默認(rèn)關(guān)閉的)。

剛才聊到，CM前置依賴「優(yōu)先級(jí)調(diào)度」，而「優(yōu)先級(jí)調(diào)度」是在「時(shí)間切片」這一架構(gòu)上實(shí)現(xiàn)的。

所以，當(dāng)「時(shí)間切片」被默認(rèn)關(guān)閉后，現(xiàn)有代碼幾乎不需要改動(dòng)就可以平滑升級(jí)到v18。

可以看到，「時(shí)間切片」特性被標(biāo)記為Umbrella，代表這一特性會(huì)影響很多API、架構(gòu)、庫

在v17發(fā)布時(shí)，React內(nèi)部重構(gòu)了「事件機(jī)制」。

React事件不會(huì)冒泡到統(tǒng)一的根節(jié)點(diǎn)，而是每個(gè)應(yīng)用(即調(diào)用ReactDOM.render的節(jié)點(diǎn))的根節(jié)點(diǎn)。

這就能讓整個(gè)應(yīng)用中的一部分保持現(xiàn)有的legacy模式，新的部分啟用CM，因?yàn)檫@兩個(gè)子應(yīng)用是相互獨(dú)立的。

由于CM帶來的Breaking Change使一大票庫都不兼容(比如mobx)，所以React還專門開發(fā)了新API —— create-subscription用于訂閱外部依賴。

這也是為什么v18 Alpha會(huì)優(yōu)先讓庫作者使用 —— 庫現(xiàn)有的實(shí)現(xiàn)在開啟CM全功能時(shí)，有可能不兼容。

時(shí)間點(diǎn)

當(dāng)前v18 Alpha已經(jīng)可用。公開的beta版會(huì)在幾個(gè)月后發(fā)布。

在beta版發(fā)出后幾周后，會(huì)發(fā)布RC版本。

最后，在RC版本后至少幾周后，穩(wěn)定版本會(huì)發(fā)布。

所以整體的預(yù)計(jì)是：v18穩(wěn)定版年底會(huì)到來。

屆時(shí)，React團(tuán)隊(duì)的工作重心將放在Server Components上。

參考資料

[1]React18工作計(jì)劃:

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