[react]仮想dom/dom/要素ツリー
2162 ワード
VirtualDom
反応元素から作成
ブラウザでDomを変更するのに時間がかかるので、Domの変更を最小限に抑えて、高速レンダリング→再レンダリングのたびにDOM全体を再描画するのではなく、反応前後の仮想Domを比較することで、実際に変更した部分をrealdomに更新することが望ましい.(以前のUIステータスをメモリに保持)
◇不要なUI更新を低減し、性能を向上させ、レンダリング性能を向上させ、仮想ドームを通じてUIを迅速に更新する
Dom(Document Object Model)ドキュメントの構造化表現(構造化表現)を提供し、プログラミング言語がDOM構造にアクセスする方法を提供し、ドキュメント構造、スタイル、コンテンツなどを変更するのに役立ちます. はんのうげんそじゅ複数の反応元素からなるツリー構造 ex)jsxコード
VirtualDomのRenderフェーズ:realdomに反映される実際の変更を決定するフェーズ
realdomdptjdmlコミットステップ:決定された変更をrealdomに反映するには
反応元素から作成
ブラウザでDomを変更するのに時間がかかるので、Domの変更を最小限に抑えて、高速レンダリング→再レンダリングのたびにDOM全体を再描画するのではなく、反応前後の仮想Domを比較することで、実際に変更した部分をrealdomに更新することが望ましい.(以前のUIステータスをメモリに保持)
◇不要なUI更新を低減し、性能を向上させ、レンダリング性能を向上させ、仮想ドームを通じてUIを迅速に更新する
<div>
<p>안녕하세요</p>
</div>
◇反応元素ツリー(1つの反応元素ツリーは画面上で時間とともに変化する瞬間を表す){
type:'div'
props:{
children:[
{
type:'p'
props:{
children:'안녕하세요'
}
}
]
}
}
応答では、データの変更による画面更新VirtualDomのRenderフェーズ:realdomに反映される実際の変更を決定するフェーズ
realdomdptjdmlコミットステップ:決定された変更をrealdomに反映するには
Reference
この問題について([react]仮想dom/dom/要素ツリー), 我々は、より多くの情報をここで見つけました https://velog.io/@harim/React-virtual-domdom요소트리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol