React/useContextについて

Contextとは

Contextとは「状態」と「状態を変更するメソッド」をpropsを用いずに、アプリケーション全体で取り回せるようにするもの。

右側のC,E,Fとコンテキストを使ってデータをやり取りしてみる。

・src/component/ComponentC.js

src/component/ComponentE.js

src/component/ComponentF.js

を作成する。

・それぞれのファイルにてrfceスニペット

・App.jsにComponentCをインポート

・ComponentCにComponentEをインポート

・ComponentEにComponentFをインポート

App.jsにて、どうComponentAからComponentFへデータを渡すのか。

・ReactからcreateContext,useStateをインポートする。

・createContextを使ってUerContextを作成する。※これは後にComponentFでインポートするのでエクスポートしとく

・useStateを使ってuserオブジェクトを作成する

・Providerを作成する。

・valueを用意

・ProviderでComponentを囲い、囲ったComponent、階層Componentでセットしたvalueを参照できる。

次はComponetnFに移る

・ComponentFの中で、先ほど作成したuserContextをAppコンポーネントよりインポートする。

・userContextを使ってConsumerを作成する。

・Consumerの中で先程セットしたvalueを参照できる。

App.js

import React, {createContext, useState} from 'react';
import './App.css';
import ComponentC from './components/ComponentC';


export const UserContext = createContext()


function App() {
  const [user, setUser] = useState({name: 'hayato', age: '27'})

  return (
    <div className="App">
      <UserContext.Provider value={user}>
        <ComponentC />
      </UserContext.Provider>
    </div>
  );
}

export default App;

ComponentC.js

import React from 'react'
import ComponentE from './ComponentE';

function ComponentC() {
    return (
        <div>
            <ComponentE />
        </div>
    )
}

export default ComponentC

ComponentE.js

import React from 'react'
import ComponentF from './ComponentF';

function ComponentE() {
    return (
        <div>
            <ComponentF />
        </div>
    )
}

export default ComponentE

ComponentF.js

import React from 'react'
import {UserContext} from '../App'
function ComponentF() {
    return (
        <div>
            <UserContext.Consumer>
                {
                    user => {
                        return <div>{user.name}</div>
                    }
                }
            </UserContext.Consumer>
        </div>
    )
}

export default ComponentF

そうすると、Appコンポーネントで定義されたユーザーデータがComponentFで参照され、画面に名前が表示される。

複数のコンテキストを扱う

・App.jsにて、languageContextとlanguagepropertiesを用意する。

・Providerを用意し、valueの中にlanguageをセットする。

・ネストすることで複数のコンテキストを扱える。

ComponentFへ

UserContext,LanguageContextを読み込む

UserConsumerの中にlanguageConsumerをネストさせる。

先程セットしたvalueを読み込む

App.js

import React, {createContext, useState} from 'react';
import './App.css';
import ComponentC from './components/ComponentC';


export const UserContext = createContext()
export const LanguageContext = createContext()

function App() {
  const [user, setUser] = useState({name: 'hayato', age: '27'})
  const [language, setLanguage] = useState('日本語')
  return (
    <div className="App">
      <UserContext.Provider value={user}>
        <LanguageContext.Provider value={language}>
          <ComponentC />
        </LanguageContext.Provider>
      </UserContext.Provider>
    </div>
  );
}

export default App;

ComponentF.js

import React from 'react'
import {UserContext, LanguageContext} from '../App'
function ComponentF() {
    return (
        <div>
            <UserContext.Consumer>
                {
                    user => {
                        return(
                            <LanguageContext.Consumer>
                                {
                                    language => {
                                        return  <div>{user.name}: {language}</div>
                                    }
                                }
                            </LanguageContext.Consumer>
                        )
                    }
                }
            </UserContext.Consumer>
        </div>
    )
}

export default ComponentF

画面には

hayato: 日本語

と表示される。

このようにuserContextで渡したvalue、languageContextで渡したvalueもComponentFで参照し表示することができる。

Contextの利用にはこのようにProvider、Consumerを使う方法がある。

useContextを使う

App.jsにて、useContextを使う場合でもProviderを使って値を渡す方法は変わらない。

ComponentF.jsにて、ReactからuseContextをインポートする。

useContextの引数にコンテキストを渡すことによって、先程Providerで渡したvalueの値を変数に代入することが出来る。

ComponentF.js

import React,{useContext} from 'react'
import {UserContext, LanguageContext} from '../App'

function ComponentF() {
    const user = useContext(UserContext)
    const language = useContext(LanguageContext)
    return (
        <div>
            <div>{user.name}: {language}</div>
            {/* <UserContext.Consumer>
                {
                    user => {
                        return(
                            <LanguageContext.Consumer>
                                {
                                    language => {
                                        return  <div>{user.name}: {language}</div>
                                    }
                                }
                            </LanguageContext.Consumer>
                        )
                    }
                }
            </UserContext.Consumer> */}
        </div>
    )
}

export default ComponentF

先ほどと同じように表示される。

このようにuseContextを使うことによって、Contextをよりシンプルにわかりやすく使えるようになる。