18
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

部分的にReactを使う

Posted at

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でアンマウントできます。

18
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?