ReactおよびReactフックでコンテキストAPIを操作する方法
序章
この記事では、ReactプロジェクトにコンテキストAPIとReactフックuseContext()
を実装する方法を検討します。 Context APIは、アプリケーションのすべてのレベルからの特定のデータを共有できるようにするReact構造であり、プロップドリルの解決に役立ちます。
React Hooksは、機能コンポーネントで記述された状態メソッドとライフサイクルメソッドのモジュラー置換として機能する関数です。 useContext()
メソッドは、コンポーネントツリーを介したプロペラドリルの代替手段であり、データを渡すための内部グローバル状態を作成します。
前提条件
- Reactの理解が必要です。 Reactの詳細については、Reactでコーディングする方法シリーズをご覧ください。
- React Hooksの一般的な知識が推奨されますが、必須ではありません。 Reactフックの詳細については、チュートリアルReactプロジェクトにReactフックを適用する方法をご覧ください。
コンテキスト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トピックページをご覧ください。