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

Reactのcontextの振る舞い

More than 3 years have passed since last update.

動くやつ

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コンポーネントにどんなどこでといった情報を渡す、というのは一例でありそうです。

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
ユーザーは見つかりませんでした