Reactのcontextの振る舞い

  • 11
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

動くやつ

https://jsfiddle.net/hokuma/zdusumq5/

注意

実験的なAPIの話なので、今後以下に書いてあることが意味をなさなくなる可能性があります。

Context

コンポーネントに何かしらのデータを渡したい時は、通常propsを使います。しかし、特定のコンポーネントの子孫コンポーネントで共通して参照したいようなデータがある時は、子孫のコンポーネントにpropsを通じて延々とバケツリレーをしなければなりません。グローバルで参照できるストアのようなオブジェクトがある場合はそれを直接参照することもできますが、Viewのコンポーネントとしての独立性を高めようと思うと、Reactと関係ないグローバルなオブジェクトへの依存は極力持たせたくないところです。

そこでcontextです。
https://facebook.github.io/react/docs/context.html

contextは、Componentのツリーにおいて自分の子孫となるコンポーネントに自動的に渡されるデータです。

データはオブジェクト形式なので、コンポーネントからthis.context.userIdのようにアクセスすることができます。

childContextTypes

コンポーネントに渡したい値のタイプPropTypesを使って定義します。文字列を渡したければPropTypes.string、数値を渡したければPropTypes.numberとなります。

getChildContext()

渡したいデータをオブジェクト形式でreturnする関数です。関数内からはthis.propsを見れるので、自分自身に渡されたpropsの値に依存した値を返すことも可能です。

contextTypes

contextを使いたいコンポーネントで、自分が使いたい値を定義します。ここに定義がないと、参照しても値はundefinedとなります。

値の上書き

ツリーの途中で、childContextTypesgetChildContextがあるコンポーネントがあると、それより子孫の位置にあるコンポーネントのcontextは上書きマージされます。

コンポーネントAのchildContextTypes

{
  theme: PropTypes.string,
  userId: PropTypes.number
}

Aの子孫であるコンポーネントBのchildContextTypes

{
  theme: PropTypes.string
}

Bの子孫であるコンポーネントCのcontextTypes

{
  theme: PropTypes.string,
  userId: PropTypes.number
}

の場合、コンポーネントCのcontextは、themeはコンポーネントBで定義された値、userIdはコンポーネントAで定義された値となリます。

まとめ

Context is an advanced and experimental feature. The API is likely to change in future releases.

将来変わりうる可能性があるので、ユーザへのインパクトが大きいところでは使わないほうが良いかもしれん。使いどころとしては、共通化されたUIコンポーネントにどんなどこでといった情報を渡す、というのは一例でありそうです。