---

---

【React in TypeScript】Contextの使い方とユースケースについて解説

投稿日：2021年2月10日

ContextはReactのv16.3から利用できるようになった機能で、これを利用することであらゆるコンポーネントから特定のObjectにアクセスできるようになります。 この記事ではContextの実例とReduxとの使い分けについて解説しています。

---

はじめに

Contextとは

環境

---

実践

Contextの作成

import React from 'react';

export const SampleTextContext = React.createContext("aaaaa");

関数コンポーネントでの利用

import React from "react";
import { SampleTextContext } from "../contexts";

const MyFunctionalComponents = () => {
    return (
        <SampleTextContext.Consumer>
            {value => {
                return(
                    <div>{value}</div>
                )
            }}
        </SampleTextContext.Consumer>
    )
}

export default MyFunctionalComponents;

クラスコンポーネントでの利用

import React from "react";
import {SampleTextContext} from "../contexts";

export default class MyClassComponents extends React.Component<{},{text:string}>{
    static contextType = SampleTextContext;
    render(){
        return (
            <div>
               {this.context}
            </div>
        )
    }
}

Providerの提供

import React from 'react';
import MyClassComponent from "./components/MyClassComponents";
import MyFunctionalComponent from "./components/MyFunctionalComponent";
import {SampleTextContext} from "./contexts";



function App() {
  const [sampleText, setSampleText] = React.useState("aaaa");

  return (
    <SampleTextContext.Provider value={sampleText}>
      <button onClick={()=>{setSampleText(sampleText + "a")}}>ボタン</button>
      <div className="App">
        <MyClassComponent />
        <MyFunctionalComponent />
      </div>
    </SampleTextContext.Provider>
  );
}

export default App;

---

ContextとReduxの使い分け

メリット１：導入と管理が簡単

デメリット１：レンダリングコスト

デメリット２：複数Contextの利用の際の煩雑さ

function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

結論

---

---

---