[React]Contextという仕組みについて

Contextとは

使い所によって少し意味は変化するのですが、、

• Propsを利用せずに様々な階層のコンポーネントに値を共有するReactの仕組み
• Propsを利用せずに様々な階層のコンポーネントに値を共有するReactのAPI
• Contextオブジェクトのこと
• Contextオブジェクトの値のこと

のいずれかを指します。

Contextを使うために

Contextを利用するには、3つの要素が必要なので、一つずつ見ていきましょう。

Contextオブジェクト

Contextオブジェクトとは、React.createContextというReactのAPIの戻り値のことです。

以下の例で言うと、MyContextがContextオブジェクトになります。
ここで保持した値がProviderで共有できます。

const MyContext = React.createContext();

Provider

Providerとは、Contextオブジェクトが保持しているコンポーネントのことです。
以下の例で言うと、MyContext.ProviderがProviderコンポーネントがProviderになります。

// ここで使用するフックをインポートしておく
import React, { createContext } from 'react';

// Contextオブジェクトを生成する
const MyContext = createContext();

export default function App() {
  const name = 'Tanaka';

  return (
    <div>
      { // valueプロパティの値を共有する }
      <MyContext.Provider value={name}>
        { // Providerでラップされているのでvalueプロパティの値を取得できる }
        <Child />
      </MyContext.Provider>

      { // Providerでラップされていないのでvalueプロパティの値を取得できない }
      <Brother />
    </div>
  );
}

Consumer

Consumerとは、Contextオブジェクトから値を取得しているコンポーネントのことです。

// ここで使用するフックをインポートしておく
import React, { createContext, useContext } from 'react';

// Contextオブジェクトを生成する
const MyContext = createContext();

// MyContextから値を取得しているのでこれはConsumer
function Child() {
  // MyContextの中にはnameが入っている
  const text = useContext(MyContext);
  return <h1>{text}</h1>;
}

export default App() {
  const name = 'React';

  return (
    <MyContext.Provider value={name}>
      { // Providerでラップされているのでvalueプロパティの値を取得できる }
      <Child />
    </MyContext.Provider>
  )
}

利用するメリット

• グローバルなstateを作成できる
  • どのコンポーネントからでもアクセス可能なstateを作成できるので、複数のコンポーネントで共通利用するデータなどを渡すのに便利
• Prop drilling問題を解消できる
  • Reactの「単方向データフロー(高い階層のコンポーネントから一方向にデータを流す)」と言う原則があるため、この問題が発生しやすいが、利用することで解消できる