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

經(jīng)過「React18工作組」幾個(gè)月工作，11月16日v18終于從Alpha版本更新到Beta版本。

本文會(huì)解釋：

• 這次更新帶來的變化

• 對(duì)開發(fā)者的影響

• 如何安裝v18 Beta

• v18穩(wěn)定版何時(shí)會(huì)來

帶來的變化

經(jīng)過與社區(qū)不斷溝通，Beta版將有如下三個(gè)API變動(dòng)：

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

用法類似如下：

import?{useSyncExternalStore}?from?'react';//?基礎(chǔ)用法，getSnapshot返回一個(gè)緩存的值 const?state?=?useSyncExternalStore(store.subscribe,?store.getSnapshot);//?根據(jù)數(shù)據(jù)字段，使用內(nèi)聯(lián)的getSnapshot返回緩存的數(shù)據(jù) const?selectedField?=?useSyncExternalStore(store.subscribe,?()?=>?store.getSnapshot().selectedField);

useId用于在客戶端與服務(wù)端之間產(chǎn)生唯一ID，避免SSR hydrate時(shí)元素不匹配，見#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節(jié)點(diǎn)，見#110討論^[3]

useInsertionEffect工作原理類似useLayoutEffect，區(qū)別在于回調(diào)執(zhí)行時(shí)還不能訪問ref中的DOM節(jié)點(diǎn)。

你可以在這個(gè)Hook內(nèi)操作全局DOM節(jié)點(diǎn)（比如<style>或SVG<defs）。

操作CSS的庫（比如CSS-IN-JS方案）可以用這個(gè)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的特性已經(jīng)完備，正式版發(fā)布之前不會(huì)再新增API。

對(duì)開發(fā)者的影響

React團(tuán)隊(duì)已經(jīng)在多個(gè)應(yīng)用的生產(chǎn)環(huán)境測(cè)試了Beta版本幾個(gè)月，并且相信他足夠穩(wěn)定。所以，開發(fā)者已經(jīng)可以升級(jí)至v18 Beta版本。

Beta作為「預(yù)發(fā)布版本」，與最終的正式版的區(qū)別是：可能還有少許bug，但整體穩(wěn)定。

社區(qū)中兼容v18的知名項(xiàng)目包括：

• 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

穩(wěn)定版何時(shí)回來

根據(jù)Andrew的回復(fù)，正式版最早發(fā)布時(shí)間可能會(huì)在22年1月底。

總結(jié)

不管是新文檔^[4]還是Beta版，可以發(fā)現(xiàn)下半年React團(tuán)隊(duì)節(jié)奏明顯加快了。

從v15升級(jí)到v16啟用Fiber架構(gòu)那天開始，React團(tuán)隊(duì)就在為并發(fā)更新的穩(wěn)定努力了。

這一天，終于不遠(yuǎn)了......

參考資料

[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/

---

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

推薦閱讀

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

老姚淺談：怎么學(xué)JavaScript？

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

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》10余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會(huì)寫一篇年度總結(jié)，已經(jīng)寫了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助1000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。分享、收藏、點(diǎn)贊、在看我的文章就是對(duì)我最大的支持~

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。