インタビューの質問 - React (9): React のコンテキスト: 非親子コンポーネント通信の実装

React では、コンポーネント間の通信は、複雑なアプリケーションを構築する際の重要な問題の 1 つです。React のデータフローは通常、トップダウン、つまり親コンポーネントから子コンポーネントに渡されますが、親以外のコンポーネントと子コンポーネントの間の通信を実装する必要がある場合があります。この問題を解決するために、React ではレベル間でデータを受け渡すことができるメカニズムである Context を導入しています。

1. React のコンテキストの概要

Context は、プロパティを介さずにコンポーネントツリー全体でデータを共有できるようにするグローバルな状態管理ソリューションです。コンテキストは通常、テーマやユーザーのログインステータスなどの共通データをコンポーネント間で共有するために使用されます。

2. コンテキストを使用して非親子コンポーネント通信を実装する

コンテキストを介して、親以外のコンポーネントと子コンポーネント間の通信を実装できます。実装手順は次のとおりです。

1. コンテキストを作成します。

まず、コンテキストを作成する必要があります。これはどこでも実行できますが、通常は別のファイルでコンテキストを定義します。

// DataContext.js
import React from 'react';

const DataContext = React.createContext();

export default DataContext;

2. データを提供します。

データを共有する必要がある親コンポーネントでは、を使用して<DataContext.Provider>データを提供します。このプロバイダーは子コンポーネントをラップして、これらの子コンポーネントが提供されたデータにアクセスできるようにします。

// ParentComponent.js
import React from 'react';
import DataContext from './DataContext';

class ParentComponent extends React.Component {
  state = { data: 'Hello from parent!' };

  render() {
    return (
      <DataContext.Provider value={this.state.data}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

3. 使用状況データ:

子コンポーネントでは、useContextフックまたはを介してContext.Consumer提供されたデータを取得できます。

// ChildComponent.js
import React, { useContext } from 'react';
import DataContext from './DataContext';

function ChildComponent() {
  const data = useContext(DataContext);

  return <p>Data from parent: {data}</p>;
}