解讀官方博客:React18真的來了
9日凌晨1點,React官方博客放出v18最新進展。
官方帶來的三條消息
在React18工作計劃[1]這篇博文中,官方帶來了三條消息。
1.v18的工作已經在進行中,并且會是下一個主要版本
2.創建了v18工作組,讓社區的專家、開發者、庫作者先試用v18,為社區的眾多庫前置兼容CM(Concurrent Mode)、教育社區做準備
工作組地址[2]
3.發布了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。
可以看到,「時間切片」特性被標記為Umbrella,代表這一特性會影響很多API、架構、庫
在v17發布時,React內部重構了「事件機制」。
React事件不會冒泡到統一的根節點,而是每個應用(即調用ReactDOM.render的節點)的根節點。
這就能讓整個應用中的一部分保持現有的legacy模式,新的部分啟用CM,因為這兩個子應用是相互獨立的。
由于CM帶來的Breaking Change使一大票庫都不兼容(比如mobx),所以React還專門開發了新API —— create-subscription用于訂閱外部依賴。
這也是為什么v18 Alpha會優先讓庫作者使用 —— 庫現有的實現在開啟CM全功能時,有可能不兼容。
時間點
當前v18 Alpha已經可用。公開的beta版會在幾個月后發布。
在beta版發出后幾周后,會發布RC版本。
最后,在RC版本后至少幾周后,穩定版本會發布。
所以整體的預計是:v18穩定版年底會到來。
屆時,React團隊的工作重心將放在Server Components上。
參考資料
[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