Reactの仮想DOMに深く飛び込みます

仮想DOMは、実際のDOMを反映するJavaScriptオブジェクトであり、Reactが状態または小道具が変更されたときに最初に新しい仮想DOMツリーを作成することにより、UIを効率的に更新し、次にreconciliationというプロセスを通じて以前のバージョンと比較します。 1. Reactはディフを実行して、木間の最小限の変化を識別します。 2.実際のDOMに必要な更新のみを適用して、コストのかかる操作を削減します。 3.リストのキーは、不要な再レンダーを避けて、安定した要素を追跡および再利用するのに役立ちます。 4.ファイバーアーキテクチャは、作業をチャンクに分割し、よりスムーズなパフォーマンスのために中断可能で優先順位付けされた更新を可能にします。直接的なDOM操作よりも常に高速ではありませんが、仮想DOMは、効率と開発者エクスペリエンスのバランスをとることにより、複雑なアプリケーションで一貫したスケーラブルなパフォーマンスを提供し、Reactの有効性の中心的な要因となっています。

Reactの仮想DOMは、その人気とパフォーマンスの背後にある重要な理由の1つです。この用語は大いに投げかけられますが、多くの開発者は、仮想DOMが実際にどのように機能するか、またはそれが重要な理由を完全に理解することなく反応を使用しています。それを明白に分解し、それがフードの下でどのように機能するか、そしてそれが速く反応する理由を探りましょう。

仮想DOMとは何ですか？

仮想DOM（VDOM）は、実際のDOMの軽量でメモリの表現です。ブラウザに表示されている実際のDOMと同じではなく、直接的なコピーでもありません。代わりに、実際のDOMノードの構造（要素、属性、コンテンツ）を反映するJavaScriptオブジェクトですが、レンダリングやレイアウトに縛られるオーバーヘッドはありません。

Reactコンポーネントの状態または小道具が変更された場合、Reactはすぐに実際のDOMを更新しません。代わりに、更新されたUIを表す新しい仮想DOMツリーを作成します。次に、この新しいツリーを以前のツリー（和解と呼ばれるプロセス）と比較して、実際に変化したものを決定します。

この比較は拡散として知られており、結果は実際のDOMに適用する必要がある最小限の変更セット（パッチ）です。その後、これらの変更のみが適用されます - UI全体ではありません。

実際のDOMを直接更新できないのはなぜですか？

実際のDOMは強力ですが、頻繁に操作すると遅くなります。要素を変更するたびに、テキストを変更したり、クラスを追加したり、リストを再構築したりするたびに、ブラウザはスタイル、リフローのレイアウト、および塗装ピクセルを再計算する必要があります。急速な状態の変更中にこれを繰り返し行うと（アニメーションやリストなど）、パフォーマンスのボトルネックを引き起こす可能性があります。

100個のアイテムのあるTODOリストを想像してください。 1つを完全にマークすると、実際のDOMでリスト全体を更新することは非効率的です。 Virtual Domにより、Reactはどのアイテムが変更されたかを正確に計算でき、リスト全体ではなく、その特定の<li>要素のみを更新できます。

したがって、仮想DOMはスマートな仲介者として機能します。更新をバッチし、高価なDOM操作を最小限に抑え、実際のDOMが可能な限りタッチされないようにします。

Reactの拡散アルゴリズムがどのように機能するか

Reactは、すべてのノードをゼロから比較するだけではありません。それは遅すぎます。代わりに、現実世界のユースケースに最適化されたヒューリスティックディフングアルゴリズムを使用します。これがどのように機能しますか：

<li>

要素タイプの比較：
ルート要素が異なるタイプ（例えば、 <div> vs <code><span></span> ）の場合、Reactは古い木を取り壊し、ゼロから新しい木を構築します。<li>

子供の再帰的拡散：
同じタイプの要素の場合、Reactは属性を比較し、変更したもののみを更新します。子要素の場合、Reactは両方の子供のリストを同時に歩き、変更を適用しますが、ここでキーが重要になります。

<li>

キーは安定した要素を識別するのに役立ちます：
レンダリングリストの場合、Reactはkey小道具を使用して、どのアイテムが追加、削除、または移動されたかを追跡します。キーがなければ、Reactは1つだけが変更されたとしても、すべてのアイテムを再レンダリングする可能性があります。キーを使用すると、変更されていない要素を再利用し、違いのみにパッチを当てることができます。

 //良い：キーを使用してアイテムを識別するのに役立ちます
{todos.map（todo =>（
  <todoitem key = {todo.id} todo = {todo} />
））}

キーは、兄弟の間で安定し、予測可能で、ユニークである必要があります。リストが静的で並べ替えられない限り、インデックスを使用しないでください。

---

和解と繊維アーキテクチャ

Reactの以前のバージョンでは、仮想Dom Diffingが単一のブロッキングパスに実装されました。メインスレッドがロックされていたため、DIFFが長すぎるとJANKが発生する可能性があります。

React 16は、和解エンジンの完全な書き換えである繊維を導入しました。ファイバーは、レンダリング作業を小さく中断可能なチャンクに分割し、反応を可能にします。

<li>更新の一時停止、再開、または優先順位付け（例えば、バックグラウンドレンダリングよりもユーザー入力を優先順位付けします）。 <li> サスペンスや同時レンダリングなどの機能を実装します。 <li>メインスレッドをブロックしないでください。

ファイバーは本質的にReactの和解をより柔軟で応答性の高いシステムに変えました。これらはすべて仮想DOMの概念に基づいていますが、更新が適用される方法と時期をよりよく制御します。

---

仮想domは常に速いですか？

必ずしもそうではありません - これは一般的な誤解です。

仮想DOMは、直接的なDOM操作よりも本質的に高速ではありません。実際、簡単な更新の場合、Vanilla JavaScriptは、拡散またはオブジェクトの作成からのオーバーヘッドがないため、より速くなる可能性があります。

しかし、仮想DOMは、変化が頻繁で予測不可能な複雑で動的なUIに輝いています。開発者に宣言的なモデルを提供します。UIがどのように見えるかを説明し、それを効率的に更新する方法を把握します。

それは生の速度に関するものではなく、一貫性、開発者のエクスペリエンス、大規模なアプリケーション全体のスケーラブルなパフォーマンスについてです。

---

まとめ

<li>仮想DOMは、実際のDOMのJavaScript表現です。 <li> Reactはそれを使用して、拡散と調整を介して最小限の変化を計算します。 <li>キーは、効率的なリストレンダリングに不可欠です。 <li>ファイバーは、より良い応答性のために、よりスマートで中断可能な更新を可能にします。 <li>利点は生の速度ではありません。大規模な予測可能なパフォーマンスです。

Virtual Domは魔法ではありませんが、パフォーマンスと開発者の人間工学のバランスをとるスマートな抽象化です。それがどのように機能するかを理解することは、特に再レンダーの最適化とキーを効果的に使用する場合、より良いReactコードを書き込むのに役立ちます。

基本的に、Reactアプリをスムーズに実行し続けるのは、フードの下の静かなエンジンです。