🌓

【useContext】React hookが便利すぎる

4 min read

React hookとは..?

React hookはReact16.8から追加された機能で、クラスコンポーネントでしか使用できなかったstateなどのReactの機能を関数コンポーネントで使用できる機能です。
公式ページは以下です。

https://ja.reactjs.org/docs/hooks-intro.html

React hookのAPIについて紹介していこうと思います。
他のReact hookに関するAPIについても解説していますので、そちらもご覧ください。

useContextとは...?

useContext()はReactのrootコンポーネントにぶら下がるツリー全体で使用できるグローバルなデータを簡単に使用できるような機能を提供しています。useContext()のイメージ図を以下で示します。

上記のイメージ図のように、useContext()が出る前は、バケツリレーの形でcontextをpropsとして渡していました。しかし、useContext()を使用することで、contextの値に直接アクセスできるためコードも複雑にんらず、パフォーマンスも向上します。

使い方

  • createContext()でコンテキストオブジェクトを生成します。
  • Providerを用いて、内部のコンポーネントにcontextを渡せるようにし、valueにcontextとしてグローバルに使用するデータを指定する。
    • <コンテキストオブジェクト.Provider value={ context値 }>
export const SampleContext = createContext();

const [sampleContext, setSampleContext] = useState('★★useContextの値です★★');

<SampleContext.Provider value={ sampleContext }>
    <Parent />
</SampleContext.Provider>
  • contextを使用する側で、useContextの引数にコンテキストオブジェクトを渡します。
  • useContext()の戻り値をjsx内で使用します。
const 関数コンポーネント = () => {
    // useContextの引数にコンテキストオブジェクトを渡す。
    const context = useContext(コンテキストオブジェクト);

    return (
        // contextの値を画面に出力する。
        <p>{ context }</p>
    )
}

実際にコードで書いてみました。例として、親コンポーネント、子コンポーネント、孫コンポーネントを用意し、孫コンポーネントでcontextの値を直接使用するようにしてみました。

  • Childコンポーネントを使用する。
Parent.jsx
import React from 'react';
// Childをimportする。
import { Child } from './index';

const Parent = () => {
    return (
        <>
            <Child />
            <div className='line'></div>
        </>
    )
}

export default Parent
  • Grandchildコンポーネントを使用する。
Child.jsx
import React from 'react';
// Grandchildをimportする。
import { Grandchild } from './index';

const Child = () => {
    return (
        <Grandchild />
    )
}

export default Child
  • GrandchildコンポーネントSampleContextにアクセスする。
Grandchild.jsx
import React, { useContext } from 'react';
import { SampleContext } from '../App';

const Grandchild = () => {
    // useContextの引数にApp.jsxで定義したSampleContextを渡す。
    const context = useContext(SampleContext);

    return (
        // contextの値を画面に出力する。
        <p>{ context }</p>
    )
}

export default Grandchild
  • contextととしてsampleContextである'★★useContextの値です★★'を定義する。
App.jsx
import React, { createContext, useState } from 'react';
import { Parent } from './components/index';

//createContextで、SapmleContextを作成する。
export const SampleContext = createContext();

function App() {
const [sampleContext, setSampleContext] = useState('★★useContextの値です★★');

  return (
    <div>
      <p>useContextのサンプルです</p>
      <SampleContext.Provider value={ sampleContext }>
        <Parent />
      </SampleContext.Provider>
    </div>
  );
}

export default App;

以下のように動作します。

createContextでコンテキストオブジェクトを生成して、valueに渡すことでcontextの値が決定されます。また、contextの更新も可能で、更新されるたびに、レンダリングは行われます。contextを使用する側では、useContext()の引数に、コンテキストオブジェクト(SampleContext)を渡しています。

まとめ

今回の記事ではuseContextを紹介しました。次回はuseReducerを紹介しようと思います。
githubにサンプルコードを載せていますので、気になった方はご覧ください。

https://github.com/Tomoki-webpro/react-hooks-study

参考記事

https://ja.reactjs.org/docs/hooks-reference.html#usecontext

https://qiita.com/seira/items/fccdf4e73c59c491558d

Discussion

ログインするとコメントできます