React團隊最近都在忙啥呢?

卡頌 發表於 2022-06-28
React

大家好,我卡頌。

不知道大家有沒有一個感覺:React新特性的更新速度非常慢,時間通常是以年計。

實際上,在React漫長的發展過程中,除了很多優秀的特性(比如HooksSuspense)外,還有很多最終沒有落地的想法。

這些想法通常不為開發者所知,這就帶來一些React新特性進展緩慢的誤解。

鑑於此,React官方部落格今天釋出了一篇文章,介紹了團隊當前工作的方向。

本文讓我們來了解React接下來工作的重心,主要包括三方面的內容:

  • 底層特性
  • 優化相關
  • 文件相關

歡迎加入人類高質量前端框架群,帶飛

底層特性

進入React18後,併發一詞在React語境下被提及的頻率越來越高。

併發相關的改動對React影響也越來越大,甚至影響到日常開發(比如useEffect在嚴格模式下開發環境會執行兩次)。

作為開發者,我們希望享受併發帶來的體驗提升,但不願意接受業務程式碼複雜度提高。

React團隊明白這個道理,所以React的發展模式主要是:

React團隊開發底層特性 + 與其他開源團隊合作開發上層特性

下面我們介紹兩個開發中的底層特性。

React Server Components

在20年的一篇官方部落格中介紹了React Server Components(後文簡稱為RSC)。作為底層特性,並不適合開發者直接使用。

React團隊與VercelShopify合作,由這些團隊接入RSC,封裝到業務框架內部(比如Next.js),再將框架提供給開發者使用。

這樣不僅能加強React與社群的聯絡(由類似Vercel這樣的專業公司充當中介),又讓React團隊可以專心於React本身的迭代(而不用分心去開發React全家桶這樣的周邊庫)。

資源請求

很多外部資源請求(比如指令碼、外部樣式、字型檔案、圖片等)都有預載入的需求。

React團隊正在開發React環境下通用的外部資源請求API

用該API請求的資料,請求過程中可以用Suspense fallback顯示載入中的效果,這樣可以防止檢視爆爆米花(popcorning)。

爆爆米花這個詞真是很形象,他形容資料載入前後佔據的高度不同,從而導致頁面尺寸劇烈變化的現象。

想象頁面中有很多待載入的圖片,隨著圖片載入,頁面被圖片不斷撐開的樣子,就像玉米不斷膨脹成爆米花。

優化相關

優化相關進展主要體現在三個方面:

  • 編譯時
  • 執行時
  • 分析工具

編譯時

黃玄React Conf 2021介紹了React Forget,這是一個編譯器,用於為可被優化的React程式碼自動加上useMemouseCallback

該專案一直在不斷迭代,最近剛完成重寫。同時,編譯器的playground也在同步開發中。

執行時

React一直沒有實現Vue中的Keep Alive特性。當前,在React中控制元件顯隱只有兩個途徑:

  • mount/unmout元件。缺點是:元件解除安裝後儲存在元件中的狀態就丟失了,儲存在元件對應DOM中的狀態(比如滾動高度)也丟失了
  • CSS(比如display: none)控制元件對應DOM顯隱。這樣雖然能儲存狀態,但卻有效能問題 —— React在執行時還是會遍歷隱藏的元件(隱藏的元件還是會render

Offscreen API的出現結合了兩者的優點。

遵照開篇提到的只關注底層特性原則,開發者最好也不要直接使用Offscreen API,而是使用整合了Offscreen的上層框架(比如路由庫)。

插一句題外話,其實Offscreen API並不是一個全新的API。在原始碼內部,他是Suspense的組成部分之一。

接下來的迭代方向只是將其從原始碼內部暴露出來。

分析工具

分析元件效能一直是剛需,為此React團隊開發了瀏覽器分析工具:

React團隊最近都在忙啥呢?

隨著React18的到來,會再新增一種時間線分析工具(timeline profiler)用於分析併發更新時的排程情況

但是,他們都沒有很好解決以下需求:

  • 某一次更新比較緩慢,該怎麼分析?
  • 某次互動的完整過程(比如一次點選,一次頁面導航),該如何分析效能?

當前正在開發一個API用於分析這些具體情況下的效能問題。

文件相關

React新文件當前仍處於Beta版本,內容還不完全。

React團隊對待新文件的態度,絕對是認真的,有個很有意思的細節:

在總結useEffect應用場景時,Dan發現一些常見場景可以用一個新的原生Hook來應對。

於是,文件寫了一半,Dan又跑去提出了useEvent提案

雖然當前文件還沒完成,但從已公佈的內容來看,不管是React萌新還是老手,都能從新文件中有所收穫。

總結

在21年的React聖誕特輯一起走進React核心團隊一文中,作者表達了一個觀點:

對於像Hooks這樣的完善特性,能夠成為Release,在其背後還有許許多多特性甚至沒到達RFC階段。

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

在一個如此重視交付,並且交付的速度越來越快的行業,當你的承諾無法兌現時,這讓人非常沮喪。但這並不意味著沒有進步:

你有時間思考與計劃,有時間實驗與學習。即使暫時失敗了,也會為成功的特性帶來啟發。

即使你還沒完成年初的預期工作,也要相信挫折和顛覆是常態,而不是例外,無論好壞,即使在React團隊也是如此。

不能因為你沒有新的特性產出,就意味著你沒有提供價值。

我想,這也是React團隊公佈接下來工作方向的一個原因吧。