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

【React - ContextAPI】Consumerの正体は、イケイケなコンポーネントだった

TL; DR

<Consumer>
  {contextValue => /* contextValueを使ってReactNodeをレンダリングする */}
</Consumer>

ContextAPIに出てくるConsumerコンポーネントの内側で宣言する関数は、

  • children prop
  • render prop

を組み合わせて作られているもので、Consumerコンポーネントはイケイケなやつだった


今回は、ContextAPIの一部であるConsumerコンポーネントについて説明します。
一目ではややこしいので、 children prop/render prop を理解した上での腹落ちを目指します!

Context APIとは

React v16.3でアップデートされた Context API は、簡単に説明すると

  • Providerに状態を注入すると、
  • Consumerに状態が渡され、
  • それを利用して画面が描画される

というものです。以下は公式のチュートリアルに載っているコードです

const ThemeContext = React.createContext('light'); // Contextを生成する

class App extends React.Component {
  render() {
    return (
      {/* Providerに状態を注入するとConsumerに状態が渡される */}
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

const ThemedButton = (props) =>
  <ThemeContext.Consumer>
    {/* Consumerから渡される状態を引数に取って、画面を描画する */}
    {theme => <Button {...props} theme={theme} />}
  </ThemeContext.Consumer>

公式では、テーマカラーやログイン中ユーザーなど、状態が変わらないが様々なコンポーネントから参照される者に対して使うことが推奨されていますが、
状態を様々なコンポーネントに上手に渡すために使ってもいいと思っています。

Consumerのわかりづらい記法は、なんだ

上のサンプルを見てわかる通り、Consumerを使う際は以下のように記述します

<Consumer>
  {contextValue => /* contextValueを使ってReactNodeをレンダリングする */}
</Consumer>

コード中の{contextValue => /* contextValueを使ってReactNodeをレンダリングする */} 👈この無名関数ちょっとよくわからないですよね、書かなくてもいいのかな?
... いえ、書かないと怒られてしまいます。

なぜなら、Consumerコンポーネントがpropsとして 「ReactNodeを返す関数」 を要求しているからです。

※ ReactNodeというのは文字列だったり、JSXエレメントだったり、booleanだったり。とりあえず表示できるものという理解で大丈夫です

試しに以下のようなコードを書くと怒られます。(ConsumerからcontextValueを受け取りたいのでこんなの全く意味ないですが...w)

<Consumer>
  <p>{/* ReactNodeを返す関数を記述しないと怒られます */}</p>
</Consumer>

Consumerコンポーネントがpropsとして「ReactNodeを返す関数」を要求している と書きましたが、

普通はコンポーネントがpropsを受け取る時って、こんな感じでタグの中に記述していきますよね

<Component props1={} props2={} ... />

Consumerコンポーネントでは開始タグと閉じタグの間にpropsを記述していますが、
なぜこうなっているかというと、children propが使われているからです。

ContextAPIは脇においておき、children prop について説明します

children propについて

参考URL

公式チュートリアル
react-in-patterns: Passing a child as a prop

children propはReact.ComponentのAPIで、React.Componentを継承したコンポーネントが利用できます。
何気なく使っているタグも、children propを使っています。

<div>
  <p>{/* <div>はこれらを */}</p>
  <span>{/* children propとして受け取っています */}</p>
<div>

children propを受け取るコンポーネント側の内部がどうなっているか知るために、適当なコンポーネントを作ってみます

import * as React from "react"

class App extends React.Component {
  render() {
    return(
      <div>
        {/* this.orops.childrenに、Appタグに挟まれたコンポーネントが渡ってくる */}
        {this.props.children}
      </div>
    )
  }
}

<App>
  <p>{/* children propとなるやつ */}</p>
</App>

Appコンポーネントタグに挟まれたコンポーネントが this.props.children として利用できるのがわかりますね。
さて、children propについて理解した上でもう一度 Consumerコンポーネントの利用例を見てみます

<Consumer>
  {contextValue => /* contextValueを使ってReactNodeをレンダリングする */}
</Consumer>

...あら、Consumerのタグに挟まれた要素はchildren propsとして渡されることはわかりますが、
コンポーネントではなく、関数の形になっていますね。

ここで、children propの次に理解する必要があるのが、 render propです。
(ContextAPIについては再度置いておきます)

render propについて

参考URL

公式チュートリアル
react-in-patterns: Function as a children, render prop

render propは簡単に言うと 「コンポーネントのrenderメソッドを外部から定義するためのテクニック」です。

色々な使い方があるので「こういうケースで使うべき!」とは言えないですが、
個人的には以下の状況が重なった時に便利そうだと思います(とはいえ実戦で使ったことないです)

  • 状態と画面描画の分離をしたいとき
  • 上で言った分離を1つのパターンとして共通利用したいとき

例えば、ローディング時のViewとローディング完了時のViewを出し分けるというのが様々な画面で重複していた場合、
render propで以下のように書くことができます (Typescriptで書いています)

interface LoadingProps {
  url: string,
  render: (isLoading: boolean) => JSX.Element
}

interface LoadingStates {
  isLoading: boolean
  data: any[]
}

class LoadingState extends React.Component<Props, States> {
  state: States = {
    isLoading: false,
    data: null
  };

  fetch = () => {
    // ... this.props.urlを使ってapiからデータ取得する処理を記述
    this.setState({
      isLoading: false,
      data: /* 取得したデータ */
    });
  }

  componentDidMount() {
    // ... 通信処理の実行
    this.setState({isLoading: true}, this.fetch);
  }

  render() {
    // ... render propに状態を渡すだけで、描画については関与しない
    return this.props.render(...this.state);
 }
}

// apiのurlと、通信していない時に表示したいコンポーネントを引数に渡している
const WithLoadingState = ({url, component}: {url: string, Component: JSX.Element}) =>
  <LoadingState
    url
    render={state: LoadingStates) =>
      state.isLoading
        ? <p>Loading...</p>
        : <Component data={state.data} />
    } />;

上のコードでは、

  • 状態については全て LoadingState コンポーネントにお任せして、
  • 何をどう表示するかに関しては WithLoadingState コンポーネントにお任せする

という「分離」を表現しています

本題: Consumerタグに挟まれる関数の正体とは

render prop は、通例で render という名前にしていますが、名前はなんでも構いません。

名前は何でもいいどころか、実は名前をつけない方法もあります。

それがまさに、children propを render propとして使う方法です。

そしてそれがConsumerコンポーネントの関数の正体です。

<Consumer>
  {contextValue => /* contextValueを使ってReactNodeをレンダリングする */}
</Consumer>

このコードは、

Consumerコンポーネントが、 「コンポーネントを返す関数(render prop)」「children propとして」 要求している
という意味でした。

先ほどのrender propの例でお見せした 状態と画面描画の分離 をConsumerコンポーネントに当てはめると、

  • Consumerコンポーネントが状態を持ち、
  • その状態をもとに何を描画するかはchildren prop(関数)に任せる

と言えそうです。

最後に、ContextAPIの型定義を見ると、Provider側 で 受け取る状態(value: T) をConsumer側のchildren propで利用しているのがわかります。

    interface ProviderProps<T> {
            value: T;
            children?: ReactNode;
    }

    interface ConsumerProps<T> {
            children: (value: T) => ReactNode;
            unstable_observedBits?: number;
    }

なので、Consumerタグに挟まれるのはコンポーネントではなく、

状態を受け取りReactNodeを返す関数でないといけないということになります。

なんと、ここまで説明に時間かかりましたが、
結論、
Consumerはイケイケなコンポーネントですね!!!

さいごに

記事中で紹介したrender propは比較的新しいテクニックで、日本語の解説を見つけるのも難しいです。

なにか理解の進む記事があれば、ぜひご紹介ください!

fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした