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

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

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

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

useSyncExternalStore 簡介

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

基本的 useSyncExternalStore API 接受三個參數(shù)：

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

• subscribe 是一個回調(diào)，它接收訂閱外部存儲數(shù)據(jù)的函數(shù)
• getSnapshot 是一個返回外部存儲數(shù)據(jù)當(dāng)前快照的函數(shù)
• getServerSnapshot 是一個可選參數(shù)，用于發(fā)送初始存儲數(shù)據(jù)的快照?？梢栽诜?wù)器數(shù)據(jù)的初始水合作用期間使用它

useSyncExternalStore 返回訂閱的外部數(shù)據(jù)的當(dāng)前快照。

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

為了更好地理解 useSyncExternalStore Hook，讓我們看一個非常簡單的實(shí)現(xiàn)?？梢詫⑵浞峙浣o一個變量（例如下面示例中的 list ），并根據(jù)需要將其呈現(xiàn)給 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 現(xiàn)已訂閱，將獲得對 externalStore 數(shù)據(jù)執(zhí)行的任何更改的實(shí)時(shí)快照。您可以使用 list 進(jìn)一步映射外部源中的項(xiàng)目并進(jìn)行實(shí)時(shí) UI 渲染。

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

useSyncExternalStore 的用例

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

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

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

useSyncExternalStore 與 useEffect

您可以選擇更常用的 useEffect Hook 來實(shí)現(xiàn)與上面示例類似的功能：

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 不提供每次狀態(tài)更新的當(dāng)前快照，并且它比 useSyncExternalStore Hook 更容易出錯。此外，它還存在臭名昭著的重新渲染問題。接下來我們簡單回顧一下這個問題。

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

考慮以下示例：

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;

您可能期望計(jì)數(shù)器應(yīng)用程序以簡單的方式運(yùn)行，其中狀態(tài)更新，組件重新渲染，最后運(yùn)行效果。然而，由于 API 調(diào)用的延遲，事情變得有點(diǎn)棘手，并且事件的順序可能不是我們所期望的。

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

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

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

useSyncExternalStore 與 useState

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

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

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

useSyncExternalStore 將向您發(fā)送可以在任何 React 組件中使用的全局存儲當(dāng)前狀態(tài)的正確快照。

使用 useSyncExternalStore 構(gòu)建待辦事項(xiàng)應(yīng)用

讓我們通過構(gòu)建一個演示待辦事項(xiàng)應(yīng)用程序來看看 useSyncExternalStore Hook 在實(shí)際項(xiàng)目中有多有用。首先，創(chuàng)建一個用作外部全局狀態(tài)的 store.js 文件。稍后我們將為我們的待辦事項(xiàng)訂閱此狀態(tài)：

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 現(xiàn)在已準(zhǔn)備好在 React 組件中訂閱。繼續(xù)創(chuàng)建一個簡單的 Todo 組件，該組件將通過訂閱您之前創(chuàng)建的商店將待辦事項(xiàng)呈現(xiàn)到 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 的迷你演示項(xiàng)目就完成了。結(jié)果應(yīng)如下所示：

圖片

總結(jié)

React 提供了很多內(nèi)置的 Hook，其中一些在開發(fā)人員中非常常用。然而，像 useSyncExternalStore 這樣真正有用的 Hook 經(jīng)常會被掩蓋。

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

如果您是 JavaScript 庫作者，可能已經(jīng)在使用它來獲得使用 useEffect Hook 或 useState Hook 無法實(shí)現(xiàn)的性能提升。正如我們在本文中探討的那樣，如果正確使用，useSyncExternalStore Hook 可以為您節(jié)省大量的開發(fā)時(shí)間。