React Hooks シリーズのこの続きでは、useContextフックについて詳しく説明します。useState私のこれまでのブログを読んできた方は、フックとフックの使用方法をすでによく理解していると思いますuseEffect。ここで、React Hooks ライブラリの別の重要なフックである を調べてみましょうuseContext。このフックは、すべてのレベルで手動でプロップを渡すことなく、コンポーネント ツリーを通じてデータを渡す方法を提供します。useContextこのブログを読み終えるまでに、 React コンポーネント全体で状態を管理および共有するために効果的に使用する方法を深く理解できるようになります。それでは、始めましょう!

React は一方向のデータ バインディングです。

まずデータバインディングとは何かを理解しましょう。
データ バインディングは、UI とそのデータの間の接続を構築するプロセスです。このデータが変更されるたびに、UI コンポーネントが更新されます。

では、一方向のデータ バインディングとは何でしょうか?
一方向データ バインディングとは、データが一方向にのみ流れることを意味します。つまり、唯一の JavaScript ファイルがデータを HTML ファイルに送信します。したがって、データは一方向にのみ流れます。

React では、データはビューと子に渡されます。親だけが状態(つまりデータ)を子に送信できます。子コンポーネントから親コンポーネントにデータを直接渡す方法はありません。

状態は親から子およびビューに渡されます。ビューからトリガーされたイベントによって状態を更新できます。

Reactコンテキストとは

props を使用して、親コンポーネントから子コンポーネントに状態を渡します。親コンポーネントから子コンポーネントに状態を渡すことは、props を使用して簡単に行うことができます。ただし、深くネストされたコンポーネントに状態を渡す場合、この方法はすぐに複雑になり、大規模なアプリケーションでの維持が困難になる可能性があります。React コンポーネント ツリーの管理も面倒になる場合があります。例えば、

最上位レベル (青) で宣言された状態は、最下位レベルのコンポーネント (赤) に到達するために中間コンポーネント (黒) を通過する必要があります。

親コンポーネントから子コンポーネントにデータを渡すプロセスを簡素化するために、React では Context の使用が提供されています。Context を使用すると、親コンポーネントはツリー内のすべての子コンポーネントとデータを共有できるため、常にプロップをチェーンに渡す必要性が減ります。これにより、ツリー内の位置に関係なく、子コンポーネントが親によって提供されるデータに簡単にアクセスできるようになります。

コンテキストは親からデータを受け取り、それを中間コンポーネントを経由せずに子に提供します。

コンテキストには次のようなデータを含めることができます。

• グローバル状態
• テーマ
• アプリケーション構成
• 認証されたユーザー名
• ユーザー設定
• 優先言語
• サービスのコレクション

アプリケーションでのコンテキストの使用

データのコンテキストを構築するには、次の 3 つの手順に従います。

• コンテキストの作成
• コンテキストを提供する
• コンテキストを消費する

createContextReact でコンテキストを作成するには、コンテキストを作成するための組み込み関数であるこれを使用します。たとえば、アプリケーションのテーマ切り替え機能を見てみましょう。

export const ThemeContext = createContext(null);

コンテキストを提供する

子コンポーネントによるコンテキスト データへのアクセスを許可するには、ツリー内の関連コンポーネントにコンテキスト データを提供する必要があります。

export default function App() {
  const [style, setStyle] = useState("light");

  function toggleStyle() {
    setStyle((style) => (style === "light" ? "dark" : "light"));
  }

  return (
    <ThemeContext.Provider
      value={{ style, toggleStyle}}
    >
      <Content /> //The child component
    </ThemeContext.Provider>
  );
}

コンテキストの使用

コンテキストを使用するには、useContextフックまたはThemeContext.Consumerコンテキストのインスタンスのいずれかを使用できます。この例ではフックを使用していますuseContext。

import { useContext } from "react";
import { ThemeContext } from "./App";

function Theme() {
  const { style, toggleStyle } = useContext(
    ThemeContext
  );

  return (
    <div>
      <p>
        The theme is {style}.
      </p>
      <button onClick={toggleStyle}>Change Theme</button>
    </div>
  );
}

export default Theme;

結論として、 は、useContextReact アプリケーション内のコンポーネント間で状態を管理および共有するための強力な方法を提供します。これは、props を通じて状態を渡す複雑さを軽減し、子コンポーネントからデータに簡単にアクセスする方法を提供します。フックuseContextは使い方が簡単で、機能コンポーネント内のコンテキスト データにアクセスできるようになります。これは、React Hooks に関する一連のブログ投稿の一部です。useStateReact Hooks について学び続けるには、このシリーズの以前のブログで説明したとを必ずチェックしてくださいuseEffect。

ブログをお読みいただきありがとうございます。フォローしてください。

リンクトイン —https://linkedin.com/in/joshiomkar04
ツイッター -https://twitter.com/ye_joshya