React 18 Beta來了

卡頌發表於2021-11-21
React

大家好，我卡頌。

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

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

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

相關文章