React.Context を使用せず、フックを作成してください。

この記事では、アプリから React.Context を削除する方法と、削除する動機を見つける方法を見ていきます。

この記事にたどり着いた方は、おそらく React に精通しており、React.Context をすでに使用した経験があるかもしれませんが、そうでない場合でも、とにかくお気軽に読んで、興味があるかもしれない人々と共有してください。

---

1. React.Context を避ける理由は何ですか?

コンテキストは可読性を低下させ、アプリを複雑にし、制限します。

この基本的な例を見てください:

<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={currentUser}>
    <ModalContext.Provider value={modal}>
      <VolumeContext.Provider value={volume}>
        <RouterProvider router={router} />
      </VolumeContext.Provider>
    </ModalContext.Provider>
  </AuthContext.Provider>
</ThemeContext.Provider>

あまりにも分かりやすくて信頼できるように見えませんか?

コンテキストを使用する場合に発生する可能性のある問題をいくつか示します:

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: <div>Current theme: light</div>
  return <div>Current theme: {theme}</div>;
}

このアプローチの長所は何ですか:

1. 子供たちが使用する前にツリーのどこかにフックを設定する必要はありません (テスト環境を含む)。
2. レンダリング構造がより明確になり、コンテキストから構築された紛らわしい矢印の形の構造がなくなりました。
3. タブ間で状態が同期されています。

---

結論

React.Context は少し前までは確かに強力なツールでしたが、use-app-events パッケージと組み合わせて適切に実装されていれば、フックはアプリのグローバルな状態を管理するためのより制御された信頼性の高い方法を提供します。

以上がReact.Context を使用せず、フックを作成してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。