reactの仮想DOMで分からないことがあります。

Question

よく差分を反映して仮想DOMを作るとは言いますが、react.jsはAページからBページへ移動した時にそれが出来るのですか？
普通、遷移したら、前のページの情報はリセットされるので、そんなことが出来るのが不思議です。
どこに記憶するのとかが気になります。

Answer 1

もちろん、ブラウザ側で遷移してしまえば、差分描画は不可能です。

ということで、Reactの機能を十全に発揮させるためには、React内部でページ遷移を再現する処理を行う必要があります。

• 画面自体はReactで書き換え
• ブラウザの履歴はHistory APIで変更

Comments

[roooo]

ありがとうございます。

>画面自体はReactで書き換え
ブラウザの履歴はHistory APIで変更

をもう少し詳しく解説して頂けないでしょうか。

[maisumakun]

実際には、React自体がルーティングを行うので、「このURLにはこの画面が対応する」という定義を行っておけば、あとはReactが処理していきます。

react-routerのような、ルーティングを書きやすくするライブラリも存在しています。

[roooo]

ありがとうございます。
例えば、Aページに遷移した時、サーバーサイドからこのjson内容が欲しい、と言った時、
>「このURLにはこの画面が対応する」
に加えて、ajax等で、値を取りに行かないと行けないのでしょうか？

通常、（reactを使わなければ、）そのページに遷移した時点でサーバーサイドから値をもらえますよね。
サーバーサイドはlaravelを使っています。

[maisumakun]

そうですね、サーバはAPIとして値を返すように作っておいて、事前に用意したReactのビュー＋JSONで受け取ったデータ、と言うかたちで画面を構築します。

[roooo]

ということは、
イ）通常、（reactを使わない）
→遷移した時点でcontroller等からviewに渡してサーバーからの値を取得できる。
フロントエンドにそのまま反映できる。

ロ)reactだと
1.このURLにはこの画面が対応する」という定義
に加えて
2.ajax等でページ遷移の後、データ取得のために処理を作らなければならない
ということでしょうか？