React 18 Beta來了

卡頌發表於2021-11-21

大家好,我卡頌。

經過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

安裝命令如下:

# 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團隊就在為併發更新的穩定努力了。

這一天,終於不遠了......

歡迎加入人類高質量前端框架群,帶飛

相關文章