大家好，我卡颂。

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

本文会解释：

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

带来的变动

通过与社区一直沟通，Beta版将有如下三个API变动：

  1. useSyncExternalStore将代替useMutableSource 用于订阅内部源，见：#86探讨

用法相似如下：

import {useSyncExternalStore} from 'react';// 根底用法，getSnapshot返回一个缓存的值const state = useSyncExternalStore(store.subscribe, store.getSnapshot);// 依据数据字段，应用内联的getSnapshot返回缓存的数据const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField);
  1. useId用于在客户端与服务端之间产生惟一ID，防止SSR hydrate时元素不匹配，见#111探讨

用法相似如下：

function Checkbox() {  const id = useId();  return (    <>      <label htmlFor={id}>Do you like React?</label>      <input type="checkbox" name="react" id={id} />    </>  ););
  1. useInsertionEffect用于插入全局DOM节点，见#110探讨

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

至此，v18的个性曾经齐备，正式版公布之前不会再新增API。

对开发者的影响

React团队曾经在多个利用的生产环境测试了Beta版本几个月，并且置信他足够稳固。所以，开发者曾经能够降级至v18 Beta版本。

Beta作为预公布版本，与最终的正式版的区别是：可能还有少许bug，但整体稳固。

社区中兼容v18的出名我的项目包含：

  • Next.js
  • Gatsby
  • React Redux
  • React Testing Library

装置Beta

装置命令如下：

# npmnpm install react@beta react-dom@beta# yarnyarn add react@beta react-dom@beta

稳定版何时回来

依据Andrew的回复，正式版最早公布工夫可能会在22年1月底。

总结

不论是新文档还是Beta版，能够发现下半年React团队节奏显著放慢了。

从v15降级到v16启用Fiber架构那天开始，React团队就在为并发更新的稳固致力了。

这一天，终于不远了......

欢送退出人类高质量前端框架群，带飞