React團(tuán)隊(duì)最近都在忙啥呢？

大家好，我卡頌。

不知道大家有沒(méi)有一個(gè)感覺(jué)：React新特性的更新速度非常慢，時(shí)間通常是以年計(jì)。

實(shí)際上，在React漫長(zhǎng)的發(fā)展過(guò)程中，除了很多優(yōu)秀的特性（比如Hooks、Suspense）外，還有很多最終沒(méi)有落地的想法。

這些想法通常不為開(kāi)發(fā)者所知，這就帶來(lái)一些「React新特性進(jìn)展緩慢」的誤解。

鑒于此，React官方博客[1]今天發(fā)布了一篇文章，介紹了團(tuán)隊(duì)當(dāng)前工作的方向。

本文讓我們來(lái)了解React接下來(lái)工作的重心，主要包括三方面的內(nèi)容：

底層特性

優(yōu)化相關(guān)

文檔相關(guān)

底層特性
進(jìn)入React18后，「并發(fā)」一詞在React語(yǔ)境下被提及的頻率越來(lái)越高。

「并發(fā)」相關(guān)的改動(dòng)對(duì)React影響也越來(lái)越大，甚至影響到日常開(kāi)發(fā)（比如useEffect在嚴(yán)格模式下開(kāi)發(fā)環(huán)境會(huì)執(zhí)行兩次）。

作為開(kāi)發(fā)者，我們希望享受「并發(fā)」帶來(lái)的體驗(yàn)提升，但不愿意接受業(yè)務(wù)代碼復(fù)雜度提高。

React團(tuán)隊(duì)明白這個(gè)道理，所以React的發(fā)展模式主要是：

React團(tuán)隊(duì)開(kāi)發(fā)底層特性 + 與其他開(kāi)源團(tuán)隊(duì)合作開(kāi)發(fā)上層特性

下面我們介紹兩個(gè)開(kāi)發(fā)中的底層特性。

React Server Components
在20年的一篇官方博客中介紹了React Server Components[2]（后文簡(jiǎn)稱(chēng)為RSC）。作為底層特性，并不適合開(kāi)發(fā)者直接使用。

React團(tuán)隊(duì)與Vercel、Shopify合作，由這些團(tuán)隊(duì)接入RSC，封裝到業(yè)務(wù)框架內(nèi)部（比如Next.js），再將框架提供給開(kāi)發(fā)者使用。

這樣不僅能加強(qiáng)React與社區(qū)的聯(lián)系（由類(lèi)似Vercel這樣的專(zhuān)業(yè)公司充當(dāng)中介），又讓React團(tuán)隊(duì)可以專(zhuān)心于React本身的迭代（而不用分心去開(kāi)發(fā)React全家桶這樣的周邊庫(kù)）。

資源請(qǐng)求
很多外部資源請(qǐng)求（比如腳本、外部樣式、字體文件、圖片等）都有預(yù)加載的需求。

React團(tuán)隊(duì)正在開(kāi)發(fā)「React環(huán)境下通用的外部資源請(qǐng)求API」。

用該API請(qǐng)求的數(shù)據(jù)，請(qǐng)求過(guò)程中可以用Suspense fallback顯示「加載中的效果」，這樣可以防止視圖「爆爆米花」（popcorning）。

「爆爆米花」這個(gè)詞真是很形象，他形容「數(shù)據(jù)加載前后占據(jù)的高度不同，從而導(dǎo)致頁(yè)面尺寸劇烈變化」的現(xiàn)象。

想象頁(yè)面中有很多「待加載的圖片」，隨著圖片加載，頁(yè)面被圖片不斷撐開(kāi)的樣子，就像玉米不斷膨脹成爆米花。

優(yōu)化相關(guān)
優(yōu)化相關(guān)進(jìn)展主要體現(xiàn)在三個(gè)方面：

編譯時(shí)

運(yùn)行時(shí)

分析工具

編譯時(shí)
黃玄[3]在React Conf 2021[4]介紹了React Forget，這是一個(gè)編譯器，用于為「可被優(yōu)化的React代碼」自動(dòng)加上useMemo與useCallback。

該項(xiàng)目一直在不斷迭代，最近剛完成重寫(xiě)。同時(shí)，編譯器的playground也在同步開(kāi)發(fā)中。

運(yùn)行時(shí)
React一直沒(méi)有實(shí)現(xiàn)Vue中的Keep Alive特性。當(dāng)前，在React中控制組件顯隱只有兩個(gè)途徑：

mount/unmout組件。缺點(diǎn)是：組件卸載后保存在組件中的狀態(tài)就丟失了，保存在組件對(duì)應(yīng)DOM中的狀態(tài)（比如滾動(dòng)高度）也丟失了

用CSS（比如display: none）控制組件對(duì)應(yīng)DOM顯隱。這樣雖然能保存狀態(tài)，但卻有性能問(wèn)題 —— React在運(yùn)行時(shí)還是會(huì)遍歷隱藏的組件（隱藏的組件還是會(huì)render）

Offscreen API的出現(xiàn)結(jié)合了兩者的優(yōu)點(diǎn)。

遵照開(kāi)篇提到的「只關(guān)注底層特性」原則，開(kāi)發(fā)者最好也不要直接使用Offscreen API，而是使用「集成了Offscreen的上層框架」（比如路由庫(kù)）。

插一句題外話(huà)，其實(shí)Offscreen API并不是一個(gè)全新的API。在源碼內(nèi)部，他是Suspense的組成部分之一。

接下來(lái)的迭代方向只是將其從源碼內(nèi)部暴露出來(lái)。

分析工具
分析組件性能一直是剛需，為此React團(tuán)隊(duì)開(kāi)發(fā)了瀏覽器分析工具：



隨著React18的到來(lái)，會(huì)再新增一種時(shí)間線(xiàn)分析工具（timeline profiler）用于分析「并發(fā)更新時(shí)的調(diào)度情況」。

但是，他們都沒(méi)有很好解決以下需求：

某一次更新比較緩慢，該怎么分析？

某次交互的完整過(guò)程（比如一次點(diǎn)擊，一次頁(yè)面導(dǎo)航），該如何分析性能？

當(dāng)前正在開(kāi)發(fā)一個(gè)API用于分析這些具體情況下的性能問(wèn)題。

文檔相關(guān)
React新文檔當(dāng)前仍處于Beta版本，內(nèi)容還不完全。

但React團(tuán)隊(duì)對(duì)待新文檔的態(tài)度，絕對(duì)是認(rèn)真的，有個(gè)很有意思的細(xì)節(jié)：

在總結(jié)useEffect應(yīng)用場(chǎng)景時(shí)，Dan發(fā)現(xiàn)一些常見(jiàn)場(chǎng)景可以用一個(gè)新的原生Hook來(lái)應(yīng)對(duì)。

于是，文檔寫(xiě)了一半，Dan又跑去提出了useEvent提案[5]。

雖然當(dāng)前文檔還沒(méi)完成，但從已公布的內(nèi)容來(lái)看，不管是React萌新還是老手，都能從新文檔中有所收獲。

總結(jié)
在21年的React圣誕特輯一起走進(jìn)React核心團(tuán)隊(duì)[6]一文中，作者表達(dá)了一個(gè)觀(guān)點(diǎn)：

對(duì)于像Hooks這樣的完善特性，能夠成為Release，在其背后還有許許多多特性甚至沒(méi)到達(dá)RFC階段。

所有特性都必須等到完全準(zhǔn)備就緒為止。在此之前，只能給其他特性讓路。

在一個(gè)如此重視交付，并且交付的速度越來(lái)越快的行業(yè)，當(dāng)你的承諾無(wú)法兌現(xiàn)時(shí)，這讓人非常沮喪。但這并不意味著沒(méi)有進(jìn)步：

你有時(shí)間思考與計(jì)劃，有時(shí)間實(shí)驗(yàn)與學(xué)習(xí)。即使暫時(shí)失敗了，也會(huì)為成功的特性帶來(lái)啟發(fā)。

即使你還沒(méi)完成年初的預(yù)期工作，也要相信挫折和顛覆是常態(tài)，而不是例外，無(wú)論好壞，即使在React團(tuán)隊(duì)也是如此。

不能因?yàn)槟銢](méi)有新的特性產(chǎn)出，就意味著你沒(méi)有提供價(jià)值。

我想，這也是React團(tuán)隊(duì)公布接下來(lái)工作方向的一個(gè)原因吧。

參考資料
[1]
React官方博客:
https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html

[2]
React Server Components:
https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

[3]
黃玄:
https://twitter.com/Huxpro

[4]
React Conf 2021:
https://www.youtube.com/watch?v=lGEMwh32soc

[5]
useEvent提案:
https://github.com/reactjs/rfcs/pull/220

[6]
一起走進(jìn)React核心團(tuán)隊(duì):
https://react.christmas/2020/24

作者：卡頌


歡迎關(guān)注微信公眾號(hào) ：魔術(shù)師卡頌