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 を置き換える方法は?

代わりにフックを作成します。

上記の例の ThemeContext をカスタム useTheme フックに置き換えてみましょう:

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 パッケージのおかげで、テーマはブラウザのタブ間でも同期されます。

この時点では、useTheme フックをアプリ内のどこでも使用して現在のテーマを取得して更新できるため、ThemeContext は必要なくなりました。

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 中国語 Web サイトの他の関連記事を参照してください。