大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?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?私信 江西 拉你進群。

推薦閱讀

1個月，200+人，一起讀了4周源碼
我歷時3年才寫了10余篇源碼文章，但收獲了100w+閱讀

老姚淺談：怎么學JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》10余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助1000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持~

總結

以上是生活随笔為你收集整理的React 18 Beta 来了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。