React のuseContextフックは、プロップの長いチェーンを介してデータを渡すことなく、コンポーネント間で状態を共有するための強力なツールです。を使用するとuseContext、コンポーネント ツリー全体で状態を簡単に共有できるため、グローバルな状態を管理するための便利なツールになります。

この記事では、フックの基本を説明しuseContext、それを使用して React アプリケーションの状態を管理する方法を見ていきます。

とは何ですかuseContext？

useContextは、親コンポーネントによって作成されたコンテキストからデータを利用できるようにする組み込みの React フックです。コンテキストは、コンテキストを作成したコンポーネントの子孫であるコンポーネントからアクセスできる共有状態データを保持するオブジェクトです。

フックuseContextはコンテキスト オブジェクトを引数として受け取り、そのコンテキストの現在の値を返します。これは、コンテキストが更新されると、コンテキストを使用するすべてのコンポーネントの再レンダリングが自動的にトリガーされることを意味します。

使い方はuseContext？

を使用するにはuseContext、まずコンテキスト オブジェクトを作成する必要があります。createContextこれは、ライブラリのメソッドを使用して行うことができますReact。以下に例を示します。

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

コンポーネントAppは、その子コンポーネントをコンポーネント内でラップしMyContext.Provider、共有状態の現在の値をvalueprop として渡します。countこの場合、値は状態と関数を含むオブジェクトですsetCount。

コンポーネントはフックを使用してオブジェクトをCounter消費し、コンテキスト オブジェクトから状態と関数を抽出します。次に、ボタンがクリックされたときに共有状態を更新する関数を使用します。MyContextuseContextcountsetCountincrement

いつ使用するかuseContext?

useContextアプリケーション全体の複数のコンポーネントからアクセスする必要があるグローバル状態を管理する場合に最も役立ちます。これは、プロップの穴あけが面倒な場合や、コンポーネントの複数のレイヤーを介して状態を渡すことを避けたい場合に適しています。

useContextこれは、コンポーネント ツリーを通じて関数を渡す必要がある場合にも適しています。コンテキスト オブジェクトを介して関数を渡すことにより、コンポーネントの複数のレイヤーを介して関数を渡す必要がなくなります。

結論

フックuseContextは、グローバル状態を管理するための強力なツールです。

これくらいで説明できれば幸いです。