React 18 Beta 來了

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?ruochuan12?參與，目前近3000人參與。

經過「React18工作組」幾個月工作，11月16日v18終于從Alpha版本更新到Beta版本。

本文會解釋：

這次更新帶來的變化
對開發者的影響
如何安裝v18 Beta
v18穩定版何時會來

帶來的變化

經過與社區不斷溝通，Beta版將有如下三個API變動：

useSyncExternalStore將替代useMutableSource 用于訂閱外部源，見：#86討論^[1]

用法類似如下：

import?{useSyncExternalStore}?from?'react';//?基礎用法，getSnapshot返回一個緩存的值
const?state?=?useSyncExternalStore(store.subscribe,?store.getSnapshot);//?根據數據字段，使用內聯的getSnapshot返回緩存的數據
const?selectedField?=?useSyncExternalStore(store.subscribe,?()?=>?store.getSnapshot().selectedField);

useId用于在客戶端與服務端之間產生唯一ID，避免SSR hydrate時元素不匹配，見#111討論^[2]

用法類似如下：

function?Checkbox()?{const?id?=?useId();return?(<><label?htmlFor={id}>Do?you?like?React?</label><input?type="checkbox"?name="react"?id={id}?/></>);
);

useInsertionEffect用于插入全局DOM節點，見#110討論^[3]

useInsertionEffect工作原理類似useLayoutEffect，區別在于回調執行時還不能訪問ref中的DOM節點。

你可以在這個Hook內操作全局DOM節點（比如<style>或SVG<defs）。

操作CSS的庫（比如CSS-IN-JS方案）可以用這個Hook插入全局<style>。

用法類似如下：

function?useCSS(rule)?{useInsertionEffect(()?=>?{if?(!isInserted.has(rule))?{isInserted.add(rule);document.head.appendChild(getStyleForRule(rule));}});return?rule;
}
function?Component()?{let?className?=?useCSS(rule);return?<div?className={className}?/>;
}

至此，v18的特性已經完備，正式版發布之前不會再新增API。

對開發者的影響

React團隊已經在多個應用的生產環境測試了Beta版本幾個月，并且相信他足夠穩定。所以，開發者已經可以升級至v18 Beta版本。

Beta作為「預發布版本」，與最終的正式版的區別是：可能還有少許bug，但整體穩定。

社區中兼容v18的知名項目包括：

Next.js
Gatsby
React Redux
React Testing Library

安裝Beta

安裝命令如下：

#?npm
npm?install?react@beta?react-dom@beta
#?yarn
yarn?add?react@beta?react-dom@beta

穩定版何時回來

根據Andrew的回復，正式版最早發布時間可能會在22年1月底。

總結

不管是新文檔^[4]還是Beta版，可以發現下半年React團隊節奏明顯加快了。

從v15升級到v16啟用Fiber架構那天開始，React團隊就在為并發更新的穩定努力了。

這一天，終于不遠了......

參考資料

[1]

#86討論: https://github.com/reactwg/react-18/discussions/86

[2]

#111討論: https://github.com/reactwg/react-18/discussions/111

[3]

#110討論: https://github.com/reactwg/react-18/discussions/110

[4]

新文檔: http://beta.reactjs.org/

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西拉你進群。