本日はReactのHookでよく用いられる、『useContext』でのデータ共有になります。
useContextフックは、React16.8以降のバージョンで使用可能です。
useContextとは
本来Reactでの親コンポーネントから子のコンポーネントへデータを渡す際は『props』でおこなわれます
複数の複雑化したコンポーネントがあった場合、『props』を経由してバケツリレー状態の
データを渡していくのは最善の方法とは言えません。
Reactの『Context API』を利用すれば
『props』を利用する事なく
下の階層にあるコンポーネントとシンプルにデータの受け渡しが容易になります。
Context APIはデータの『数値』『関数』『オブジェクト』これらを渡す時に非常に便利です。
簡単な使用例で学びましょう。
useContext使用例
create-react-appでの解説となります。
まずは最上位である親コンポーネントのApp.jsファイルから、子のコンポーネントに渡されたデータを取得します。
オブジェクトの『data』にはそれぞれ値を持たせます。
ContextRoot.Providerのタグの中の『value』に『date』を設定します。
今回では『ContextRoot.Provider』 というタグでわざわざ囲まないといけない処理が必要です。
これを書かずに使用する方法もあります。
import React from "react"; 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;
App.jsファイルがある同じディレクトリ内に
『ContextRoot.js』というファイルを作成します。
ルートのファイルとなり『Context』の作成は『createContext』で行います。
imprt React from "react"; import { createContext } from 'react'; const ContextRoot = createContext(); expot default ContextRoot;
『createContext』はコンテキストインスタンスを作成する為のものとなります。
なのでコンテキストを作成し、『初期化』をします。 『createContext』の引数は元々『初期値』はありません。
『createContext』の引数に『createContext(defaultValue);』を渡した場合は
Reactのドキュメントで は、デフォルト値を指定すると、『コンポーネントをラップせずに個別にテストするのに役立つ可能性がある』と明記してあります。
なので、デフォルト値が役立つ状況があります
ですが、ほとんどの場合はデフォルト値は不要または有用ではありません。
それでは、App.jsの『data』を渡して取得していきましょう。
『Components』というフォルダーを作成し
『Child.js』と『GrandChild.js』の2つの新しいファイルを作成して下さい。
import React from "react"; import GrandChild from "./GrandChild"; const Child = () => { return <GrandChild />; }; export default Child;
import React, { 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()』で『value』で設定した
『ContextRoot』のデータを取得し
それを『data』という変数に格納します。
後は埋め込んで、表示させるだけとなります。
つまりデータを取得してるのは
『GrandChild.js』ファイルとなります。
それでは取得したのを表示していきましょう。
npm start
DEMO
どのように書いていくかではなく、まずはデータの受け渡しの流れを理解する事が重要です
この記事で解説した『useContext』Hookの流れの理解に役立つことを私は願っています。