React 18 Beta 来了

经过「React18工作组」几个月工作，11月16日v18终于从Alpha版本更新到Beta版本。

本文会解释：

• 这次更新带来的变化

• 对开发者的影响

• 如何安装v18 Beta

• v18稳定版何时会来

带来的变化

经过与社区不断沟通，Beta版将有如下三个API变动：

1. 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);

2. 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} />
    
  );
);

3. useInsertionEffect用于插入全局DOM节点，见#110讨论^[3]

useInsertionEffect工作原理类似useLayoutEffect，区别在于回调执行时还不能访问ref中的DOM节点。

你可以在这个Hook内操作全局DOM节点（比如