React 18 Beta 来了

大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，目前近3000人参与。

经过「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} />;
}

至此，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月底。

总结

不管是新文档^[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/

最近组建了一个江西人的前端交流群，如果你是江西人可以加我微信 ruochuan12 私信江西拉你进群。