Reactで最初から最後まで作るときは、「全機能が1つの巨大なコンポーネントに入っている」「React外で書くコードは、その巨大なコンポーネントを、変化するようなprops
を指定せずrender
するだけ」というようなコードになることも多いかと思います。多くのReactの解説もそれが前提となっています。
ただ、別な仕組みで作ったHTMLにReactを混ぜこみたい、あるいは既存のサイトを徐々にReactへ移行したい、という場合には、部分的にReactを入れることが必要となってきます。もちろん、Reactでもそのような使い方は可能です。
Facebook社でも
まず、ReactDOM.render
は、1ページに対して複数回呼んでも構いません。バラバラなDOMノードにrender
すれば、それぞれがReactのルートとして働きます。そして、Reactが書き換えるのは指定したDOMノードの内部だけですので、そこ以外のDOMには影響なく、一部だけにReactを適用することができます。
実はFacebook自身も、既存のDOMにReactのコンポーネントを混ぜて運用している、とのことです。
In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine them with our existing server-generated templates and other client-side code. (Reactのリファレンスより)
更新の方法
もちろん理想的に言えば、「最初にマウントしてあとは外部からの操作の必要がない」ようにコンポーネントを作っておくのがいいのでしょうけど、他のライブラリと連携するなどの事情で、一度render
したもののprops
を変えざるを得ないことがあります。
このような場合、再度ReactDOM.render
しましょう。2回目のrender
が同じコンポーネントであれば、再作成ではなく差分更新として処理されます(リファレンス)。逆に、何らかの都合で「同じコンポーネントだけど完全に再作成したい」ような場合は、「いったんアンマウントしてから再度render
する」「key
を違えたものでrender
する」などの方法があります。
アンマウント
ブラウザの遷移でしかrender
したものの必要性が変化しないのなら考える必要はないのですが、「別なライブラリで作ったコンポーネントの内側にReactのコンポーネントを入れたので、親コンポーネントがアカウントされる場合にはReactを外さないといけない」、あるいは「ページ遷移をpjaxなどで行っているので、JavaScriptは別に後始末する必要がある」などで、Reactをアンマウントする必要がある場面も出てきます。
このようなときには、ReactDOM.unmountComponentAtNode
でアンマウントできます。