Context
コンテクストは主に、何らかのデータが、ネストレベルの異なる多くのコンポーネントからアクセスできる必要がある時に使用される
コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用する必要がある
もし多くの階層を経由していくつかの props を渡すことを避けたいだけであれば、コンポーネントコンポジションを使うと良い
コンポーネントコンポジションを使うことにより、制御をルートcomponentに反転することができる
この手法は多くの場合、役に立つが、子componentが増えた時にはcontainment(props.children)を使って子要素を入れ込むようにするのが良い
code: Page.jsx
const Page = ({ user }) => {
const userLink = (
<Link>
<Avatar user={user} />
</Link>
);
return <PageLayout userLink={userLink}/>;
}
/**
* <PageLayout userLink={userLink} />
* PageLayoutは以下をrenderする
* <NavigationBar userLink={userLink} />
* NavigationBarは以下をrenderする
* {props.userLink}
*/