Help us understand the problem. What is going on with this article?

React hooksを基礎から理解する (useContext編)

React hooksとは

React 16.8 で追加された新機能です。
クラスを書かなくても、stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。

useContextとは

Contextとは?

Reactコンポーネントのツリーに対して「グローバル」とみなすデータについて利用するように設計されています。
コンポーネントの再利用をより難しくする為、慎重に利用しなくてはなりません。

Contextによってコンポーネントツリー間におけるデータの橋渡しについて、すべての階層ごとに渡す必要性がなくなり、propsバケツリレーをしなくても下の階層で Contextに収容されているデータにアクセスできるようになりました。

参考:React公式サイト コンテクスト

useContextとは?

useContextとは、Context機能をよりシンプルに使えるようになった機能。
親からPropsで渡されていないのに、Contextに収容されているデータへよりシンプルにアクセスできるというものです。

かんたんなサンプルを作ってみる

階層はこんな感じ

【ContextA.jsx】
ContextBをimportしている

react.js
import React from 'react'
import ContextB from './ContextB'

const ContextA = () => <ContextB/>

export default ContextA

【ContextB.jsx】
ContextCをimportしている

react.js
import React from 'react'
import ContextC from './ContextC'

const ContextB = () => <ContextC/>

export default ContextB

【ContextC.jsx】
Appをimportしている

react.js
//ReactからuseContextをimport
import React, {useContext} from 'react'
//AppコンポーネントからUserContext, HobbyContextをimport
import {UserContext, HobbyContext} from '../../App'

const ContextC = () => {
//useContextの引数に、UserContextやHobbyContextを渡すことによって、
//AppコンポーネントでProviderに渡したvalueの値を変数に代入することが出来る
  const user = useContext(UserContext)
  const hobby = useContext(HobbyContext)
  return (
    <p>{user.name}{user.age}: 趣味は{hobby}です</p>
  )
}

export default ContextC

【App.js】
ContextAをimportしている。

react.js
// ReactからcreateContextとuseStateをimport
import React, {createContext, useState} from 'react'
import './App.css';
import Context from './components/ContextSample/ContextA'

//createContextを使ってUserContextとHobbyContextを作成
export const UserContext = createContext()
export const HobbyContext = createContext()

function App() {
//useStateを使ってuserを作成
  const [user, setUser] = useState({
    name: 'セイラ',
    age: '17'
  })
//useStateを使ってhobbyを作成
  const [hobby, setHobby] = useState('キャンプ')
  return (
    <div className='App'>
//userContext。Providerを作成、valueにはuserをセット
      <UserContext.Provider value={user}>
//HobbyContext.Providerを作成、valueにはhobbyをセット
        <HobbyContext.Provider value={hobby}>
          <Context/>
        </HobbyContext.Provider>
      </UserContext.Provider>
    </div>
  )
}

export default App

React.createContextからの戻り値を受け取り、そのコンテクストの現在値を返します。
React.createContextの現在値は、ツリー内でこのフックを呼んだコンポーネントの直近にある <Context.Provider>valueの値によって決まります。

useContextを呼び出すコンポーネントはコンテクストの値が変化するたびに毎回再レンダーされます。

ちなみにContextC.jsxをuseContextを使わずに書くと以下。
Consumerを使ってProviderを読み取っています。

javascript.js
import React from 'react'
import {UserContext, HobbyContext} from '../../App'

const ContextC = () => {

  return (
    <>
      <UserContext.Consumer>
        {
          user => {
            return (
              <HobbyContext.Consumer>
                { hobby => <p>{user.name}({user.age}): 趣味{hobby}</p> }
              </HobbyContext.Consumer>
            )
          }
        }
      </UserContext.Consumer>
    </>
  )
}

export default ContextC

useContextを使うと、随分シンプルに書けることがわかります :v:

表示はこの通り
ss.png

このようにuseContextを使うことにより、Contextをよりシンプルに分かりやすく書けました :thumbsup:

最後に

次回は useReducer について書きたいと思います。

参考にさせていただいたサイト

https://reactjs.org/

seira
エイチームライフスタイルのフロントエンドデザイナ。 最近はReact, Rails, php, jQuery Sass, Photoshop, Figmaなどを触っています。
life-a-tm
人生のイベントや日常生活に密着した比較サイト、情報サイト等様々なウェブサービスを企画・開発・運営
https://life.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away