[react]仮想dom/dom/要素ツリー

2162 ワード
VirtualDOM ダミードーム DOM React テキストリンク
VirtualDom

  • 反応元素から作成

  • ブラウザでDomを変更するのに時間がかかるので、Domの変更を最小限に抑えて、高速レンダリング→再レンダリングのたびにDOM全体を再描画するのではなく、反応前後の仮想Domを比較することで、実際に変更した部分をrealdomに更新することが望ましい.(以前のUIステータスをメモリに保持)
    ◇不要なUI更新を低減し、性能を向上させ、レンダリング性能を向上させ、仮想ドームを通じてUIを迅速に更新する
    • Dom(Document Object Model)
  • ドキュメントの構造化表現(構造化表現)を提供し、プログラミング言語がDOM構造にアクセスする方法を提供し、ドキュメント構造、スタイル、コンテンツなどを変更するのに役立ちます.
    • はんのうげんそじゅ
  • 複数の反応元素からなるツリー構造
    • ex)jsxコード
    <div>
 <p>안녕하세요</p>
</div>
    ◇反応元素ツリー(1つの反応元素ツリーは画面上で時間とともに変化する瞬間を表す)
    {
 type:'div'
 props:{
  children:[
   {
  type:'p'
  props:{
   children:'안녕하세요'
    }
   }
  ]
 }
}
    応答では、データの変更による画面更新

  • VirtualDomのRenderフェーズ:realdomに反映される実際の変更を決定するフェーズ

  • realdomdptjdmlコミットステップ:決定された変更をrealdomに反映するには
    • バニラJavaScript私たちのキャンバスの要素を着色🌈
    フレックスボックス:フレックスコンテナとフレックスアイテム