React 18 Beta 來了

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

本文會解釋：

• 這次更新帶來的變化

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

• 如何安裝v18 Beta

• v18穩(wěn)定版何時會來

帶來的變化

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

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

用法類似如下：

import?{useSyncExternalStore}?from?'react';

//?基礎(chǔ)用法，getSnapshot返回一個緩存的值
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);

2. useId用于在客戶端與服務(wù)端之間產(chǎn)生唯一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}?/>
????
??);
);

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

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

你可以在這個Hook內(nèi)操作全局DOM節(jié)點（比如

<b id="afajh"><abbr id="afajh"></abbr></b>