React コンテキストの秘密を解き明かす: パワー、落とし穴、パフォーマンス

React Context は、プロップドリルの混乱なしにコンポーネント間で共有データを配信する魔法のパイプラインのような素晴らしいツールです。ただし、この便利さには落とし穴があります。チェックされていない使用法は、アプリの機能を低下させるパフォーマンスのボトルネックにつながる可能性があります。

このブログでは、よくある落とし穴を回避しながら React Context をマスターする方法を探っていきます。最終的には、最適化された高パフォーマンスのアプリを備えた Context プロになれるでしょう。

---

1. React Context とは何ですか? なぜ気にする必要がありますか?

React Context は、アプリのコンポーネントを織り合わせる目に見えないスレッドです。これにより、コンポーネント ツリーのすべてのレベルで props を渡す煩雑な作業を行わずにデータ共有が可能になります。

これが簡単な例です:

const ThemeContext = React.createContext('light'); // Default: light theme

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>




<hr>

<h2>
  
  
  <strong>2. The Hidden Dangers of React Context</strong>
</h2>

<h3>
  
  
  <strong>Context Change = Full Re-render</strong>
</h3>

<p>Whenever a context value updates, all consumers re-render. Even if the specific value a consumer uses hasn’t changed, React doesn’t know, and it re-renders anyway.</p>

<p>For example, in a responsive app using AdaptivityContext:<br>
</p>

<pre class="brush:php;toolbar:false">const AdaptivityContext = React.createContext({ width: 0, isMobile: false });

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <AdaptivityContext.Provider value={{ width, isMobile }}>
      <Header />
      <Footer />
    </AdaptivityContext.Provider>
  );
}

ここでは、AdaptivityContext のすべてのコンシューマーは、たとえ isMobile のみを気にしていても、幅が変更されると再レンダリングします。

---

3.ベストプラクティスによるコンテキストの充実

ルール 1: コンテキストを小さくする

不必要な再レンダリングを防ぐために、コンテキストを論理単位に分割します。

const SizeContext = React.createContext(0);
const MobileContext = React.createContext(false);

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <SizeContext.Provider value={width}>
      <MobileContext.Provider value={isMobile}>
        <Header />
        <Footer />
      </MobileContext.Provider>
    </SizeContext.Provider>
  );
}

ルール 2: コンテキスト値を安定させる

useMemo を使用して、レンダリングのたびにコンテキスト値の新しいオブジェクトを作成することを回避します。

const memoizedValue = React.useMemo(() => ({ isMobile }), [isMobile]);

<MobileContext.Provider value={memoizedValue}>
  <Header />
</MobileContext.Provider>;

ルール 3: より小さいコンテキスト コンシューマを使用する

コンテキスト依存のコードをより小さな独立したコンポーネントに移動して、再レンダリングを制限します。

function ModalClose() {
  const isMobile = React.useContext(MobileContext);
  return !isMobile ? <button>Close</button> : null;
}

function Modal() {
  return (
    <div>
      <h1>Modal Content</h1>
      <ModalClose />
    </div>
  );
}

---

4.コンテキストだけでは不十分な場合: 自分の限界を知る

コンテキストは、テーマ、ロケール、ユーザー認証などのグローバルで軽量なデータに適しています。複雑な状態管理の場合は、Redux、Zustand、Jotai などのライブラリを検討してください。

---

5.チートシート: React コンテキストの概要

Concept	Description	Example
Create Context	Creates a context with a default value.	const ThemeContext = React.createContext('light');
Provider	Makes context available to child components.	...
useContext Hook	Accesses the current context value.	const theme = React.useContext(ThemeContext);
Split Contexts	Separate context values with different update patterns.	const SizeContext = React.createContext(); const MobileContext = React.createContext();
Stabilize Values	Use useMemo to stabilize context objects.	const memoValue = useMemo(() => ({ key }), [key]);
Avoid Full Re-renders	Isolate context usage in smaller components or use libraries like use-context-selector.	{({ isMobile }) => ...}
When Not to Use Context	Avoid for complex state; use dedicated state management libraries.	Use Redux or Zustand for large-scale state management.

コンセプト

---

説明

例 コンテキストの作成

デフォルト値を使用してコンテキストを作成します。 const ThemeContext = React.createContext('light'); プロバイダ

---

子コンポーネントでコンテキストを利用できるようにします。 ...

useContext フック

現在のコンテキスト値にアクセスします。 const テーマ = React.useContext(ThemeContext); コンテキストの分割 異なる更新パターンでコンテキスト値を分離します。 const SizeContext = React.createContext(); const MobileContext = React.createContext();

値を安定させる

useMemo を使用してコンテキスト オブジェクトを安定させます。 const memoValue = useMemo(() => ({ key }), [key]); 完全な再レンダリングを避ける

コンテキストの使用を小さなコンポーネントで分離するか、use-context-selector などのライブラリを使用します。 {({ isMobile }) => ...} コンテキストを使用しない場合

複雑な状態の場合は避けてください。専用の状態管理ライブラリを使用します。 大規模な状態管理には Redux または Zustand を使用します。

6. React コンテキストの将来

---

React チームは、コンポーネントが特定のコンテキスト値のみをサブスクライブできる機能であるコンテキスト セレクターに積極的に取り組んでいます。それまでは、use-context-selector や React-tracked などのツールが優れた選択肢となります。 7.重要なポイント React Context は強力ですが、特効薬ではありません。 コンテキストの管理を誤ると、パフォーマンスに重大な影響を与える可能性があります。 コンテキストの分割、価値の安定化、コンシューマの最適化などのベスト プラクティスに従うことで、その可能性を最大限に引き出すことができます。 今すぐこれらのテクニックの実装を開始し、React アプリを次のレベルに引き上げてください。 ?

以上がReact コンテキストの秘密を解き明かす: パワー、落とし穴、パフォーマンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。