原文鏈接：https://blog.logrocket.com/exploring-usesyncexternalstore-react-hook/

原文作者：Abhinav Anshul 翻譯：一川

您可能已經熟悉 React 提供的一組內置 Hook，例如 useState、useEffect、useMemo 等等。其中包括 useSyncExternalStore Hook，它在庫作者中非常常用，但在客戶端 React 項目中很少見到。

在本文中，將探討 useSyncExternalStore Hook，以更好地了解它是什么、它如何工作、為什么有用以及何時應該在前端項目中利用它。

useSyncExternalStore 簡介

如果您想訂閱外部數據存儲，useSyncExternalStore 可能是完美的 API。大多數時候，開發人員選擇 useEffect Hook。但是，如果您的數據存在于 React 樹之外，則 useSyncExternalStore 可能更合適。

基本的 useSyncExternalStore API 接受三個參數：

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

• subscribe 是一個回調，它接收訂閱外部存儲數據的函數
• getSnapshot 是一個返回外部存儲數據當前快照的函數
• getServerSnapshot 是一個可選參數，用于發送初始存儲數據的快照。可以在服務器數據的初始水合作用期間使用它

useSyncExternalStore 返回訂閱的外部數據的當前快照。

考慮這樣一種情況，外部數據不在React 樹中——換句話說，它存在于你的前端代碼或一般應用程序之外。在這種情況下，可以使用 useSyncExternalStore 訂閱該數據存儲。

為了更好地理解 useSyncExternalStore Hook，讓我們看一個非常簡單的實現。可以將其分配給一個變量（例如下面示例中的 list ），并根據需要將其呈現給 UI：

import { useSyncExternalStore } from 'react';
import externalStore from './externalStore.js';

function Home() {
const list = useSyncExternalStore(externalStore.subscribe, externalStore.getSnapshot);

  return (
    <>
      <section>
        {list.map((itm, index) => (
          <div key={index}>
            <div>{itm?.title}</div>
          </div>
        ))}
      </section>
    </>
  );
}

如您所見， externalStore 現已訂閱，將獲得對 externalStore 數據執行的任何更改的實時快照。您可以使用 list 進一步映射外部源中的項目并進行實時 UI 渲染。

外部存儲中的任何更改都會立即反映出來，React 將根據快照更改重新渲染 UI。

useSyncExternalStore 的用例

useSyncExternalStore Hook 是許多利基用例的理想解決方案，例如：

• 緩存來自外部 API 的數據：由于此 Hook 主要用于訂閱外部第三方數據源，因此緩存數據也變得更簡單。可以使應用程序的數據與外部數據源保持同步，以后還可以將其用于離線支持
• WebSocket 連接：由于 WebSocket 是一個“持續”連接，因此可以使用此 Hook 來實時管理 WebSocket 連接狀態數據
• 管理瀏覽器存儲：在這種情況下，需要在 Web 瀏覽器存儲（例如 IndexedDB 或 localStorage ）與應用程序狀態之間同步數據，可以使用 useSyncExternalStore 訂閱更新外部store

在很多這樣的情況下，這個 Hook 可能比流行的 useEffect Hook 非常有用并且更容易管理。讓我們在下一節中比較這兩個 Hook。

useSyncExternalStore 與 useEffect

您可以選擇更常用的 useEffect Hook 來實現與上面示例類似的功能：

const [list, setList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // assuming externalStore has a fetchData method or it is an async operation
        const newList = await externalStore.fetchData();
        setList(newList);
      } catch (error) {
        console.error(error);
      }
    };
    // calling the async function here
    fetchData();
  }, []);

但是， useEffect Hook 不提供每次狀態更新的當前快照，并且它比 useSyncExternalStore Hook 更容易出錯。此外，它還存在臭名昭著的重新渲染問題。接下來我們簡單回顧一下這個問題。

在處理 useEffect Hook 時，可能會遇到的一個主要問題是渲染順序。瀏覽器完成繪制后，只有 useEffect Hook 會觸發。這種延遲（盡管是故意的）會在管理正確的事件鏈方面帶來意想不到的錯誤和挑戰。

考慮以下示例：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('count- ', count);
    // Imagine some asynchronous task here, like fetching data from an API
    // This could introduce a delay between the state update and the effect running
    // afterwards.
  }, [count]);

  const increment = () => {
    setCount(count + 1);
  };

  console.log('outside the effect count - ', count);

  return (
    <div>
      <div>Counter</div>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

您可能期望計數器應用程序以簡單的方式運行，其中狀態更新，組件重新渲染，最后運行效果。然而，由于 API 調用的延遲，事情變得有點棘手，并且事件的順序可能不是我們所期望的。

現在考慮一個具有許多此類副作用和不同依賴項數組的應用程序。在這種情況下，以正確的順序跟蹤狀態更新將是一場噩夢。

如果您的數據位于外部并且不依賴于現有的 React API 來處理，那么您可以避免所有這些并使用 useSyncExternalStore Hook 來修復此性能差距。與 useEffect Hook 不同，此 Hook 會立即觸發，不會造成任何延遲。

useSyncExternalStore 還可以防止前面提到的重新渲染問題，只要狀態發生變化，您就可能會遇到 useEffect 問題。有趣的是，使用 useSyncExternalStore 訂閱的狀態不會重新渲染兩次，從而解決了巨大的性能問題。

useSyncExternalStore 與 useState

使用 useSyncExternalStore Hook 時，您可能會覺得您只是訂閱一個狀態并將其分配給一個變量，類似于使用 useState Hook。然而， useSyncExternalStore 不僅僅是簡單地分配狀態。

useState Hook 的一個限制是它被設計為以“每個組件”的方式管理狀態。換句話說，你定義的狀態僅限于它自己的React組件，無法全局訪問。您可以使用回調、全局強制狀態，甚至可以在組件中使用 prop-drilling 狀態，但這可能會減慢您的 React 應用程序的速度。

useSyncExternalStore Hook 通過設置一個全局狀態來防止此問題，您可以從任何 React 組件訂閱該狀態，無論其嵌套有多深。更好的是，如果您正在處理非 React 代碼庫，您只需關心訂閱事件。

useSyncExternalStore 將向您發送可以在任何 React 組件中使用的全局存儲當前狀態的正確快照。

使用 useSyncExternalStore 構建待辦事項應用

讓我們通過構建一個演示待辦事項應用程序來看看 useSyncExternalStore Hook 在實際項目中有多有用。首先，創建一個用作外部全局狀態的 store.js 文件。稍后我們將為我們的待辦事項訂閱此狀態：

let todos = [];
let subscribers = new Set();

const store = {
  getTodos() {
    // getting all todos
    return todos;
  },

 // subscribe and unsubscribe from the store using callback
  subscribe(callback) {
    subscribers.add(callback);
    return () => subscribers.delete(callback);
  },

// adding todo to the state
  addTodo(text) {
    todos = [
      ...todos,
      {
        id: new Date().getTime(),
        text: text,
        completed: false,
      },
    ];

    subscribers.forEach((callback) => {
      callback();
    });
  },
// toggle for todo completion using id
  toggleTodo(id) {
    todos = todos.map((todo) => {
      return todo.id === id ? { ...todo, completed: !todo.completed } : todo;
    });
    subscribers.forEach((callback) => callback());
  },
};

// exporting the default store state
export default store;

您的 store 現在已準備好在 React 組件中訂閱。繼續創建一個簡單的 Todo 組件，該組件將通過訂閱您之前創建的商店將待辦事項呈現到 UI：

import { useSyncExternalStore } from "react";
import store from "./store.js";

function Todo() {
// subscribing to the store  
const todosStore = useSyncExternalStore(store.subscribe, store.getTodos);

  return (
    <div>
      {todosStore.map((todo, index) => (
        <div key={index}>
           <input
              type="checkbox"
              value={todo.completed}
              onClick={() => store.toggleTodo(todo.id)}
            />
            // toggle based on completion logic 
            {todo.completed ? <div>{todo.text}</div> : todo.text}
        </div>
      ))}
    </div>
  );
}

export default Todo;

至此，我們使用 useSyncExternalStore 的迷你演示項目就完成了。結果應如下所示：

圖片

總結

React 提供了很多內置的 Hook，其中一些在開發人員中非常常用。然而，像 useSyncExternalStore 這樣真正有用的 Hook 經常會被掩蓋。

在這篇文章中，您已經了解了此 Hook 有許多出色的使用示例，它們不僅可以改善整體應用程序體驗，還可以防止您在使用 useEffect Hook 時可能遇到的討厭的錯誤。

如果您是 JavaScript 庫作者，可能已經在使用它來獲得使用 useEffect Hook 或 useState Hook 無法實現的性能提升。正如我們在本文中探討的那樣，如果正確使用，useSyncExternalStore Hook 可以為您節省大量的開發時間。