React 中真实 DOM 和虚拟 DOM 的真实示例是什么? [英] What is the real world example of real DOM and virtual DOM in React?

问题描述

如果有人问Real DOM 和Virtual DOM 的例子，可能是程序化的?这怎么解释?

If someone asks for the example of Real DOM and Virtual DOM, may be programmatically? How can this be explained?

推荐答案

普通 DOM 操作

如果这些列表项之一更新，则 DOM 会重新渲染整个列表.这就是 DOM 效率低下的原因.这是低效的，因为它需要递归遍历每个节点.

If one of these list items updates, then the DOM re-renders the entire list. This is where the DOM’s inefficiency stems from. This is inefficient because it requires traversing every single node recursively.

虚拟 DOM

由于数据保存在状态上，组件可以简单地监听状态上的事件，如果有更新，它可以重新渲染到 UI.React 然后只更新那些已经改变的元素，而不管那些没有改变的元素.

Since the data is saved on the state, components can simply listen to events on the state and if there is an update, it can re-render to the UI. React then only updates those elements that have changed, leaving alone those that have not.

这篇关于React 中真实 DOM 和虚拟 DOM 的真实示例是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！