被低估的 React Hook - useSyncExternalStore

概述

發現 React 生態系統中隱藏的強大引擎：「useSyncExternalStore」掛鉤。本文深入探討了其變革潛力，挑戰了傳統的狀態管理典範。透過無縫整合外部資料來源並增強跨組件通信，該鉤子提供了一種非常規但功能強大的方法。

與我們一起揭開useSyncExternalStore的神秘面紗。我們將剖析其機制，揭示其優點，並透過現實世界的範例展示實際應用。最後，您將掌握如何利用這個鉤子來簡化複雜性、提高效能並為您的程式碼庫帶來新的組織水平。

用法

根據 React，useSyncExternalStore 是一個 React Hook，可讓您訂閱外部儲存。但「外部商店」到底是什麼？它實際上需要兩個函數：

• 訂閱函數應該訂閱商店並傳回取消訂閱的函數。
• getSnapshot 函數應該從儲存讀取資料的快照。 好吧，一開始可能很難得到。我們可以進入範例。

示範

在今天的示範中，我將介紹一個經典應用程式：「待辦事項清單」。

商店

首先，我們必須定義初始狀態：

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

您可以看到我定義了類型，然後創建了包含待辦事項的狀態作為空數組

現在是減速器：

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

我們的減速器只有 3 個操作：ADD_TASK、REMOVE_TASK 和 COMPLETE_TASK。這是待辦事項清單邏輯的經典範例。

終於等了，店家：

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

此程式碼片段示範如何在 TypeScript 中建立一個簡單的類似 Redux 的狀態管理系統。以下是其工作原理的詳細說明：

1. listeners 數組：此數組包含監聽器函數列表，每當狀態發生變化時，這些函數都會收到通知。

2. createStore 函數：此函數負責建立 Redux 風格的 store。它需要兩個參數：

• reducer：一個reducer函數，負責根據目前狀態和調度的action計算下一個狀態。
• 初始狀態：應用程式的初始狀態。

1. state：此變數保存應用程式的目前狀態。

2. getState 函數：傳回目前狀態。

3. dispatch 函數：接受一個action對象，將其與目前狀態一起傳遞給reducer，用結果更新狀態，然後呼叫emitChange函數通知監聽者狀態變化。

4. subscribe 函數：接受一個監聽器函數，將其加入監聽器陣列中，並傳回一個清理函數，可以呼叫該函數來刪除監聽器。

5. store 物件：已建立的 store 物件保存對dispatch、getState 和 subscribe 函數的參考。

6. emitChange 函數：遍歷偵聽器陣列並呼叫每個偵聽器函數，通知它們狀態變更。

在程式碼末尾，使用 createStore 函數建立一個存儲，並具有給定的減速器和初始狀態。現在可以匯入該儲存並在應用程式的其他部分使用它來管理和控制狀態。

要注意的是，這段程式碼提供了狀態管理系統的簡化實現，並且缺乏 Redux 等函式庫中的一些高階功能和最佳化。然而，它是理解使用監聽器和減速器函數進行狀態管理的基本概念的一個很好的起點。

使用 useSyncExternalStore 掛鉤。我們可以得到這樣的狀態：

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

透過這個鉤子調用，我們可以全域動態地存取store，同時保持可讀性和可維護性

優點和缺點

「useSyncExternalStore」鉤子在 React 應用程式中的狀態管理上下文中既具有優點，也具有潛在的缺點：

優點：

1. 與外部來源無縫集成：此鉤子可以輕鬆地與外部資料來源集成，從而促進統一的狀態管理方法。這種整合可以簡化對不同來源的資料的處理，增強應用程式的凝聚力。

2. 跨組件通信：「useSyncExternalStore」促進組件之間的高效通信，簡化數據共享並減少複雜的 prop 鑽取或上下文管理的需要。

3. 效能改進：透過集中狀態管理並最大限度地減少狀態更新的傳播，此掛鉤有可能優化渲染性能，從而提高應用程式的響應速度和效率。

4. 簡單和乾淨的程式碼：鉤子的抽象 API 可以產生更乾淨、更有組織的程式碼，使其更易於理解和維護，特別是在大型應用程式中。

5. 減少樣板：「useSyncExternalStore」可以減少為狀態管理編寫冗餘程式碼的需要，提供一種簡潔且一致的方式來管理應用程式範圍的狀態。

缺點：

1. 學習曲線：不熟悉此掛鉤的開發人員在從更成熟的狀態管理解決方案過渡時可能會經歷學習曲線。適應新方法最初可能會減慢開發速度。

2. 自訂限制：掛鉤的預訂功能可能無法完全符合每個應用程式的獨特要求。自訂超出鉤子功能的行為可能需要額外的解決方法。

3. 潛在的抽象開銷：根據其內部機制，與專門針對應用程式需求定制的更優化的解決方案相比，該鉤子可能會在性能或內存使用方面帶來輕微的開銷。

4. 社區和生態系統：作為一個被低估或鮮為人知的鉤子，「useSyncExternalStore」可能缺乏完善的社區和全面的生態系統，可能導致可用資源或第三方庫減少.

5. 相容性和未來更新：與 React 未來版本的兼容性以及鉤子本身的潛在更新可能是值得關注的問題。確保長期支援和無縫升級可能需要額外的努力。

結論

總之，useSyncExternalStore 提供了一種獨特的狀態管理方法，強調無縫整合和跨組件通訊。雖然它提供了多種好處，例如改進的效能和簡化的程式碼，但開發人員應仔細評估其與專案要求的兼容性，並考慮潛在的學習曲線和限制。

以上是被低估的 React Hook - useSyncExternalStore的詳細內容。更多資訊請關注PHP中文網其他相關文章！