不要使用 React.Context，建立鉤子。

在本文中，我們將了解如何在應用程式中擺脫 React.Context 並找到這樣做的動機。

如果您閱讀本文，您可能熟悉 React，並且可能已經有了 React.Context 的經驗，但如果沒有，請隨時閱讀它並與可能感興趣的人分享。

---

1. 為什麼要避免使用 React.Context？

上下文會降低可讀性、糾纏和限制應用程式。

看看這個基本範例：

98a86725d72d98f2b9cabc482365e7f8
  4b90a298546767af0dfbf93180d488e9
    9ccdbad4d7cf2a5ab2f30697c3e282f0
      805c6193b8bd78f920c172a82a0e8e47
        5b13746435d164e45e11fb6d2c565337
      98e42f95a9cd80104723307a01d2a42d
    37fe62713bcc433be054e66f06fcb3ad
  30fcab49531d609f912afed89b90ce7e
f27e91231f5585982d1354585706ae4a

看起來不太容易理解和可靠，是嗎？

以下是使用上下文時的一些潛在問題：

1. 使用的上下文越多，您的應用程式的可讀性和可控制性就越差；
2. 有時嵌套上下文需要正確的順序才能工作，這使得您的應用程式難以維護；
3. 在設定測試環境期間應重複使用一些上下文以保持正常工作；
4. 您必須確保該元件是必要上下文提供者樹中的子元件。

有趣的事實：眾所周知的「承諾地獄」看起來很相似 ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

---

2.如何替換React.Context？

改為建立掛鉤。

讓我們用自訂 useTheme 掛鉤取代上面範例中的 ThemeContext：

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

我們使用了一個名為 use-app-events 的 npm 套件來讓 useTheme 掛鉤的所有實例進行通訊以同步其主題狀態。它確保在應用程式中多次調用 useTheme 時主題值相同。

此外，得益於 use-app-events 包，主題甚至可以在瀏覽器標籤之間同步。

此時，不再需要 ThemeContext，因為可以在應用程式中的任何位置使用 useTheme 掛鉤來取得當前主題並更新它：

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: light16b28748ea4df4d9c2150843fecfba68
  return dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: {theme}16b28748ea4df4d9c2150843fecfba68;
}

這種方法的優點是什麼：

1. 無需在樹上的某個地方設置掛鉤，孩子就可以使用它（包括測試環境）；
2. 渲染結構更加清晰，這意味著不再根據上下文建立令人困惑的箭頭形結構；
3. 狀態在選項卡之間同步。

---

結論

React.Context 確實是一個強大的工具，但如果與 use-app-events 套件一起正確實現，鉤子提供了一種更受控制和更可靠的方式來管理應用程式的全域狀態。

以上是不要使用 React.Context，建立鉤子。的詳細內容。更多資訊請關注PHP中文網其他相關文章！