[[435280]]

大家好，我卡頌。

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

本文會(huì)解釋?zhuān)?/p>

• 這次更新帶來(lái)的變化
• 對(duì)開(kāi)發(fā)者的影響
• 如何安裝v18 Beta
• v18穩(wěn)定版何時(shí)會(huì)來(lái)

帶來(lái)的變化

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

useSyncExternalStore將替代useMutableSource 用于訂閱外部源，見(jiàn)：#86討論[1]

用法類(lèi)似如下：

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

用法類(lèi)似如下：

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)，見(jiàn)#110討論[3]

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

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

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

用法類(lèi)似如下：

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} />; 
}

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