大家好，我是若川。

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

本文会解释：

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

React 18 Beta 来了_开发者

带来的变化

经过与社区不断沟通，​​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);

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

  1. ​​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} />;
}

至此，​​v18​​​的特性已经完备，正式版发布之前不会再新增​​API​​。

对开发者的影响

​​React​​​团队已经在多个应用的生产环境测试了​​Beta​​​版本几个月，并且相信他足够稳定。所以，开发者已经可以升级至​​v18 Beta​​版本。

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

社区中兼容​​v18​​的知名项目包括：

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

安装Beta

安装命令如下：

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

稳定版何时回来

根据​​Andrew​​的回复，正式版最早发布时间可能会在22年1月底。

React 18 Beta 来了_微信_02

总结

不管是新文档[4]还是​​Beta​​​版，可以发现下半年​​React​​团队节奏明显加快了。

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

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

参考资料

[1]

#86讨论: https://github.com/reactwg/react-18/discussions/86

[2]

#111讨论: https://github.com/reactwg/react-18/discussions/111

[3]

#110讨论: https://github.com/reactwg/react-18/discussions/110

[4]

新文档: http://beta.reactjs.org/





················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇，在知乎、掘金收获超百万阅读。从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。同时，最近组织了源码共读活动，帮助1000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。