Reactガイドを読んでいくその35
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
コンテクスト
昨日の続き
API
React.createContext
その名の通りコンテクストオブジェクトを作成する。
Reactがコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合最も近い上位の一致するProviderから現在のコンテクスト値を読み取る。
const MyContext = React.createContext(defaultValue);
Context.Provider
すべてのコンテクストオブジェクトにはプロバイダコンポーネントが付属している。
そのためコンシューマコンポーネントはコンテクストの変更を追うことができる。
valueプロパティを受け取り、子のコンシューマコンポーネントに渡される。
<MyContext.Provider value={/* 何らかの値 */}>
Class.contextType
React.createContext()によって作成されたコンテキストオブジェクトを指定することができる。
this.contextを使って、コンテクストタイプの最も近い現在値を利用することが可能。
レンダー関数を含むあらゆるライフサイクルメソッドで参照することができる。
class MyClass extends React.Component { componentDidMount() { let value = this.context; /* MyContextの値を使用し、マウント時に副作用を実行します */ } componentDidUpdate() { let value = this.context; /* ... */ } componentWillUnmount() { let value = this.context; /* ... */ } render() { let value = this.context; /* MyContextの値に基づいて何かをレンダーします */ } } MyClass.contextType = MyContext;
class MyClass extends React.Component { static contextType = MyContext; render() { let value = this.context; /* 値に基づいて何かをレンダーします */ } }
Context.Consumer
コンテクストの変更を追うReactコンポーネント。
関数コンポーネント内でコンテクストを追うことができる。
利用の場合はfunction as a childが必要。
コンテクストの値を受け取り、Reactノードを返す。
<MyContext.Consumer> {value => /* コンテクストの値に基づいて何かをレンダーします */} </MyContext.Consumer>
Context.displayName
コンテクストオブジェクトはdisplayNameという文字列型のプロパティを有する。
ReactDevToolsはこの文字列を利用してコンテクストの表示の仕方を決定する。
const MyContext = React.createContext(/* some value */); MyContext.displayName = 'MyDisplayName'; <MyContext.Provider> // "MyDisplayName.Provider" in DevTools <MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools
明日は例です。
今日はここまで。