動くやつ
注意
実験的な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となります。
値の上書き
ツリーの途中で、childContextTypesとgetChildContextがあるコンポーネントがあると、それより子孫の位置にあるコンポーネントの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コンポーネントにどんなやどこでといった情報を渡す、というのは一例でありそうです。