[[435280]]

大家好，我卡頌。

經過「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} />; 
}

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