Context APIによるデータの受け渡し

HOCとAnt Designとやってきたので、それらのコンセプトを頭に置きながらContext APIというものを学んでみる。 コンポーネントが増えてアプリケーションが大きくなればなるほど、stateやpropsの受け渡しは大変になる。 そんなときに使える手段の一つとしてContext APIというのが用意されている。VueでいうEvent busに似ているかもしれない。

Context API

いつ使うか

コンポーネントツリーのどこからでも所望のデータにアクセスしたいとき

活用例

• アプリケーションのテーマを変えるとき
• 言語設定などを変更するとき

使い方

React.createContext()

import React from 'react'

const ThemeContext = React.createContext()

export default ThemeContext

Provider

Contextを読み込んでから、Providerを通してvalueにデータをわたす。 このデータはstateに格納してわたすことでリアクティブにできる。

import React from 'react'
import ThemeContext from './Contexts'

function App () {
  return(
    <ThemeContext.Provider value={this.state}>
      (...snip)
    </ThemeContext.Provider>
  )
}

export default App

Consumer

Providerでvalueに渡されたデータをConsumerで受け取る。

import React from 'react'
import ThemeContext from './Contexts'

function Popovers () {
  return (
    <ThemeContext.Consumer>
      {state => (
        (...snip)
      )}
    </ThemeContext.Consumer>
  )
}

export default Popovers

Ant Design + Context API + Children Propsの活用例