期待已久的React 18 Beta 来了

大家好，我卡颂。

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

本文会解释：

• 这次更新带来的变化
• 对开发者的影响
• 如何安装v18 Beta
• v18稳定版何时会来

带来的变化

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

useSyncExternalStore将替代useMutableSource 用于订阅外部源，见：#86讨论[1]

用法类似如下：

1. import {useSyncExternalStore} from 'react'; 
2.  
3. // 基础用法，getSnapshot返回一个缓存的值 
4. const state = useSyncExternalStore(store.subscribe, store.getSnapshot); 
5.  
6. // 根据数据字段，使用内联的getSnapshot返回缓存的数据 
7. const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField); 

useId用于在客户端与服务端之间产生唯一ID，避免SSR hydrate时元素不匹配，见#111讨论[2]

用法类似如下：

1. function Checkbox() { 
2.   const id = useId(); 
3.   return ( 
4.     <> 
5.       <label htmlFor={id}>Do you like React?</label> 
6.       <input type="checkbox" name="react" id={id} /> 
7.     </> 
8.   ); 
9. ); 

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

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

你可以在这个Hook内操作全局DOM节点（比如<style>或SVG<defs）。

操作CSS的库（比如CSS-IN-JS方案）可以用这个Hook插入全局<style>。

用法类似如下：

1. function useCSS(rule) { 
2.   useInsertionEffect(() => { 
3.     if (!isInserted.has(rule)) { 
4.       isInserted.add(rule); 
5.       document.head.appendChild(getStyleForRule(rule)); 
6.     } 
7.   }); 
8.   return rule; 
9. } 
10. function Component() { 
11.   let className = useCSS(rule); 
12.   return <div className={className} />; 
13. }

原文链接：https://mp.weixin.qq.com/s/GZK5sncycR1_g8ecUlzZYA