React 18 Beta真的来了

目录
文章目录隐藏
  1. 带来的变化
  2. 对开发者的影响
  3. 安装 Beta
  4. 稳定版何时回来
  5. 总结

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

本文会解释:

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

React 18 Beta 真的来了

带来的变化

经过与社区不断沟通,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团队就在为并发更新的稳定努力了。

这一天,终于不远了……

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » React 18 Beta真的来了

发表回复