关于前端:React-18-Beta来了

大家好，我卡颂。

通过 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);

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

3. 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

装置命令如下：

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

稳定版何时回来

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

总结

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

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

这一天，终于不远了 ……

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