序章

この記事では、ReactプロジェクトにコンテキストAPIとReactフックuseContext()を実装する方法を検討します。 Context APIは、アプリケーションのすべてのレベルからの特定のデータを共有できるようにするReact構造であり、プロップドリルの解決に役立ちます。

React Hooksは、機能コンポーネントで記述された状態およびライフサイクルメソッドのモジュラー置換として機能する関数です。 useContext()メソッドは、コンポーネントツリーをプロップドリルする代わりの方法であり、データを渡すための内部グローバル状態を作成します。

前提条件

コンテキストAPIの調査

Context APIを調べるために、Reactアプリケーションでコンテキストにアクセスする方法を見てみましょう。 Reactは、データを小道具として渡すのを支援するcreateContext()メソッドを提供します。

ColorContext.jsファイルで、colorsオブジェクトを設定し、引数としてプロパティをcreateContext()メソッドに渡します。

ColorContext.js
const colors = {
  blue: "#03619c",
  yellow: "#8c8f03",
  red: "#9c0312"
};

export const ColorContext = React.createContext(colors.blue);

これにより、.createContext()メソッドは、プロパティcolors.blueをあるコンポーネントから別のコンポーネントへの小道具としてサブスクライブできるようになります。

次に、.Providerコンポーネントを別のファイルのコンテキストに適用できます。 .Providerコンポーネントは、アプリケーション全体のコンテキストでデータを有効にします。 index.jsファイルで、ColorContext関数をインポートし、returnステートメントの.Providerコンポーネントに追加します。

[label index.js] 
import React from 'react';
import { ColorContext } from "./ColorContext";

function App() {
  return (
    <ColorContext.Provider value={colors}>
      <Home />
    </ColorContext.Provider>
  );
}

これにより、ColorContext関数のコンテキストがラップされ、アプリケーションに色が付けられます。 ColorContext関数はコンポーネントツリーに存在しますが、.Providerコンポーネントはその機能全体を容易にします。 ここで、Homeコンポーネントは、ColorContext関数内のデータを吸収します。 Homeの子コンポーネントも、ColorContextからデータを取得します。

.Consumerコンポーネントを適用して、コンテキストの変更をサブスクライブすることもできます。 これは、クラスコンポーネントと機能コンポーネントの両方で使用できます。 .Consumerコンポーネントには、returnステートメント内でのみアクセスできます。 index.jsファイルで、returnステートメントのColorContext関数に.Consumerコンポーネントを設定します。

[index.js]
return (
  <ColorContext.Consumer>
    {colors => <div style={colors.blue}>Hello World</div>}
  </ColorContext.Consumer>
);

コンテキストが変更されるたびに、.Consumerコンポーネントは、変更に基づいてアプリケーションを更新および調整します。

コンポーネントにコンテキストタイプMyComponent.contextType = ColorContext;を指定すると、コンポーネント内のコンテキストlet context = this.context;にアクセスでき、JSXの外部でコンテキストにアクセスできるようになります。 または、代わりにstatic contextType = ColorContext;を挿入することもできます。 これは、コンテキストをコンポーネントに取り込む方法を単純化するため、クラスベースのコンポーネントに非常に適しています。 ただし、機能コンポーネントでは機能しません。

クラスコンポーネントの.contextTypeプロパティを使用してコンテキストを宣言し、その値にColorContext関数を割り当てることもできます。 ColorContext関数をstatic contextTypeコンテキストAPIに割り当てることもできます。 これらのメソッドは、クラスコンポーネント内でのみ適用されます。 機能コンポーネント内でコンテキストを呼び出す方法を確認しましょう。

useContext()メソッドの処理

useContext()メソッドは、機能コンポーネント内のコンテキストを受け入れ、.Providerおよび.Consumerコンポーネントを1回の呼び出しで処理します。 index.jsファイルで、useContext()メソッドとColorContext関数をインポートし、機能コンポーネントを宣言します。

index.js
import React, { useContext } from "react";
import ColorContext from './ColorContext';

const MyComponent = () => {
  const colors = useContext(ColorContext);

  return <div style={{ backgroundColor: colors.blue }}>Hello World</div>;
};

機能コンポーネントMyComponentは、ColorContext内の値をuseContext()メソッドの引数として設定します。 returnステートメントは、アプリケーションの背景色を適用します。 変更がトリガーされると、useContext()メソッドは最新のコンテキスト値で更新をサブスクライブします。 Context APIと比較して、useContext()メソッドを使用すると、より少ないコード行でアプリケーション全体でデータを共有および渡すことができます。

結論

ReactのContextAPIは、コンポーネントツリーでのプロップドリルを回避するための組み込み関数とコンポーネントを提供します。 React Hook useContext()は、1回の呼び出しで、合理化された機能的なコンポーネント本体に同じ機能を適用します。

その他のプロジェクトやリソースについては、Reactトピックページをご覧ください。