を見た反応する開発者トーク（Pete Hunt: React: ベストプラクティスの再考 -- JSConf EU 2013) で、講演者はモデルのダーティチェックが遅くなる可能性があると述べました。しかし、ほとんどの場合、仮想 DOM はモデルよりも大きいはずなので、仮想 DOM 間の差分を計算すると、実際にはさらにパフォーマンスが低下するのではないでしょうか。
私は仮想 DOM (特にサーバー側レンダリング) の潜在的なパワーを非常に気に入っていますが、その長所と短所をすべて知りたいと思います。
ベストアンサー1
私は、仮想DOMモジュールなので、あなたの質問に答えることができるかもしれません。実際には、ここで解決する必要がある問題が2つあります。
- いつ再レンダリングしますか?回答: データがダーティであることがわかったとき。
- 効率的に再レンダリングするにはどうすればいいでしょうか?回答: 仮想DOMを使用して実際のDOMパッチを生成する
React では、各コンポーネントに状態があります。この状態は、ノックアウトやその他の MVVM スタイルのライブラリにある観測可能なオブジェクトのようなものです。基本的に、React は、このデータが変更されたときに観測できるため、シーンを再レンダリングするタイミングを知っています。ダーティ チェックは、一定の間隔でデータをポーリングし、データ構造内のすべての値を再帰的にチェックする必要があるため、観測可能なオブジェクトよりも遅くなります。比較すると、状態に値を設定すると、何らかの状態が変更されたことをリスナーに通知するため、React は状態の変更イベントをリッスンして、再レンダリングをキューに入れます。
仮想 DOM は、DOM を効率的に再レンダリングするために使用されます。これは、データのダーティ チェックとは実際には関係ありません。ダーティ チェックの有無にかかわらず、仮想 DOM を使用して再レンダリングできます。2 つの仮想ツリー間の差分を計算する際にオーバーヘッドが発生するという点では正しいですが、仮想 DOM の差分は、データが変更になったかどうかではなく、DOM で更新する必要があるものを把握するためのものです。実際、差分アルゴリズム自体はダーティ チェッカーですが、DOM がダーティかどうかを確認するために使用されます。
状態が変化した場合にのみ仮想ツリーを再レンダリングすることを目標としています。したがって、状態が変化したかどうかを確認するためにオブザーバブルを使用することは、不要な再レンダリングを防ぐ効率的な方法です。不要な再レンダリングは、多くの不要なツリーの差分を引き起こします。何も変化していない場合は、何もしません。
仮想 DOM は、シーン全体を再レンダリングしているかのようにコードを記述できるため便利です。舞台裏では、DOM を期待どおりに更新するパッチ操作を計算します。したがって、仮想 DOM の diff/patch アルゴリズムはおそらく最適なソリューションではありませんが、アプリケーションを表現する非常に優れた方法を提供します。必要なものを正確に宣言するだけで、React/virtual-dom がシーンをそのように見せる方法を計算してくれます。手動で DOM を操作したり、以前の DOM の状態について混乱したりする必要はありません。シーン全体を再レンダリングする必要もありません。これは、パッチを適用するよりもはるかに非効率的です。