react画像

本日はReactのHookでよく用いられる、『useContext』でのデータ共有になります。

useContextフックは、React16.8以降のバージョンで使用可能です。

useContextとは
- useContextフック使い方
  - 最後に

useContextとは

本来Reactでの親コンポーネントから子のコンポーネントへデータを渡す際は『props』でおこなわれます

複数の複雑化したコンポーネントがあった場合、『props』を経由してバケツリレー状態の

データを渡していくのは最善の方法とは言えません。

Reactの『Context API』を利用すれば

『props』を利用する事なく

下の階層にあるコンポーネントとシンプルにデータの受け渡しが容易になります。

Context APIはデータの『数値』『関数』『オブジェクト』これらを渡す時に非常に便利です。

簡単な使用例で学びましょう。

useContextフック使い方

create-react-app(CRA)での解説となります。

まずは最上位である親コンポーネントのApp.jsファイルから、子のコンポーネントに渡されたデータを取得します。

今回では『ContextRoot.Provider』というタグでわざわざ囲まないといけない処理が必要です。

これを書かずに使用する方法もあります。

// App.js

import Child from "./components/Child";
import ContextRoot from "./ContextRoot";

const data = {
  number: 123,
  text: "テスト",
  funcAlert: () => {
    alert("Hello, Welcome");
  }
}

const App = () => {
return (
<ContextRoot.Provider value={data}>
      <Child />
</ContextRoot.Provider>
  );
}

export default App;

オブジェクトの『data』にはそれぞれ値を持たせます。

<ContextRoot.Provider value={data}>
      <Child />
</ContextRoot.Provider>

ContextRoot.Providerのタグの中の『value』props(小道具)で『date』を渡します。

この値は、そのすべての子とその子孫が利用できるようになります。

サブツリー全体で、useContextフックを使用して値を読み取ることができます。

App.jsファイルがある同じディレクトリ内に

『ContextRoot.js』というファイルを作成します。

ルートのファイルとなり『Context』の作成は『createContext』で行います。

// ContextRoot.js

import { createContext } from 'react';

const ContextRoot = createContext();

expot default ContextRoot;

『createContext』はコンテキストインスタンスを作成する為のものとなります。

なのでコンテキストを作成し、初期化をします。

createContextの引数は元々『初期値』はありません。

createContextの引数に、デフォルトの値を渡した場合ではReactのドキュメント(docs)によると、デフォルト値を指定すると、『コンポーネントをラップせずに個別にテストするのに役立つ可能性がある』と明記してあります。

なので、デフォルト値が役立つ状況があります。

ですが、ほとんどの場合はデフォルト値は不要または有用ではありません。

それでは、App.jsの『data』を渡して取得していきましょう。

『Components』というフォルダーを作成し

『Child.js』と『GrandChild.js』の2つの新しいファイルを作成して下さい。

子のコンポーネントと孫のコンポーネントファイルとなります。

// Child.js

import GrandChild from "./GrandChild";

const Child = () => {
  return <GrandChild />;
};

export default Child;

// GrandChild.js

import { useContext } from "react";

import ContextRoot from "../ContextRoot";

const GrandChild = () => {

const data = useContext(ContextRoot);

return (
<div>
<p>{data.number}</p>

<p>{data.text}</p>

<button onClick={data.funcAlert}>ボタン</button>

</div>
  );
};

export default GrandChild;

子コンポーネントでコンテキストを使用するには、useContextフックを使用してコンテキストにアクセスする必要があります。

const data = useContext(ContextRoot);

ContextRootは、コンテキストオブジェクト(React.createContextから返される値)です。

このメソッドは、そのコンテキストの現在の値を返します。

つまり、引数としてuseContextフックに渡される必要があるものとなります。

この値は、ツリー内で呼び出し元のコンポーネントの上にある、最も近い< MyContext.Provider >value propsによって決定されます。

ContextRootのデータを取得し、それを『data』という変数に割り当てます。

後は埋め込んで、表示させるだけとなります。

つまりデータを取得してるのは『GrandChild.js』ファイルとなります。

それでは取得したのを表示していきましょう。

npm start

DEMO

reactGIF画像

最後に

Reactのコンテキストは、コンポーネントツリーの深さに関係なく、子コンポーネントにグローバルデータを提供できるようにする概念となっています。

コンテキストをアプリケーションに統合するときは、かなり複雑になることを考慮してください。

ですが、アプリケーションがシンプルな場合では、useContextフックはReduxの実行可能な代替手段になる可能性があります。

どのように書いていくかではなく、まずはデータの受け渡しの流れを理解する事が重要です。

本日は以上となります。

この記事で解説したuseContextフックの流れの理解に役立つことを私は願っています。

deve.K

エンジニアが未来を切り開く。

React Hook【useContext 】基礎

useContextとは

useContextフック使い方

最後に

useContextとは

useContextフック 使い方

最後に

useContextフック使い方