为什么说 React 的 Virtual DOM 概念比脏模型检查的性能更高? [英] Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
问题描述
我在 (Pete Hunt: React: Rethinking best practice -- JSConf EU 2013) 并且演讲者提到模型的脏检查可以是减缓.但是，计算虚拟 DOM 之间的差异实际上是不是性能更低，因为在大多数情况下，虚拟 DOM 应该比模型大?
I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff between virtual DOMs actually even less performant since the virtual DOM, in most of the cases, should be bigger than model?
我真的很喜欢 Virtual DOM(尤其是服务器端渲染)的潜在力量，但我想知道所有的优点和缺点.
I really like the potential power of the Virtual DOM (especially server-side rendering) but I would like to know all the pros and cons.
推荐答案
我是 virtual-dom 模块，所以我也许可以回答你的问题.这里其实有两个问题需要解决
I'm the primary author of a virtual-dom module, so I might be able to answer your questions. There are in fact 2 problems that need to be solved here
- 我什么时候重新渲染? 答:当我发现数据很脏时.
- 如何高效地重新渲染?答案:使用虚拟 DOM 生成真实的 DOM 补丁
- When do I re-render? Answer: When I observe that the data is dirty.
- How do I re-render efficiently? Answer: Using a virtual DOM to generate a real DOM patch
在 React 中，您的每个组件都有一个状态.这种状态就像一个可以在淘汰赛或其他 MVVM 风格库中找到的可观察对象.本质上，React 知道何时重新渲染场景，因为它能够观察到这些数据何时发生变化.脏检查比 observable 慢，因为您必须定期轮询数据并递归检查数据结构中的所有值.相比之下，在状态上设置一个值会向侦听器发出某个状态已更改的信号，因此 React 可以简单地侦听状态上的更改事件并排队重新渲染.
In React, each of your components have a state. This state is like an observable you might find in knockout or other MVVM style libraries. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because you must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering.
虚拟 DOM 用于高效地重新渲染 DOM.这与脏检查您的数据并没有真正的关系.您可以使用带有或不带有脏检查的虚拟 DOM 重新渲染.你是对的，在计算两个虚拟树之间的差异时有一些开销，但虚拟 DOM 差异是关于了解 DOM 中需要更新的内容，而不是您的数据是否已更改.事实上，diff 算法本身就是一个脏检查器，但它用于查看 DOM 是否脏.
The virtual DOM is used for efficient re-rendering of the DOM. This isn't really related to dirty checking your data. You could re-render using a virtual DOM with or without dirty checking. You're right in that there is some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not your data has changed. In fact, the diff algorithm is a dirty checker itself but it is used to see if the DOM is dirty instead.
我们的目标是仅在状态改变时重新渲染虚拟树.因此，使用 observable 来检查状态是否已更改是防止不必要的重新渲染的有效方法，这会导致许多不必要的树差异.如果一切都没有改变，我们就什么都不做.
We aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.
虚拟 DOM 很好，因为它让我们可以像重新渲染整个场景一样编写代码.在幕后，我们想要计算一个补丁操作来更新 DOM 以符合我们的预期.因此，虽然虚拟 DOM 差异/补丁算法可能不是最佳解决方案，但它为我们提供了一种非常好的表达应用程序的方式.我们只是准确地声明我们想要的东西，React/virtual-dom 会找出如何让你的场景看起来像这样.我们不必手动操作 DOM 或对之前的 DOM 状态感到困惑.我们也不必重新渲染整个场景，这可能比修补它的效率低得多.
A virtual DOM is nice because it lets us write our code as if we were re-rendering the entire scene. Behind the scenes we want to compute a patch operation that updates the DOM to look how we expect. So while the virtual DOM diff/patch algorithm is probably not the optimal solution, it gives us a very nice way to express our applications. We just declare exactly what we want and React/virtual-dom will work out how to make your scene look like this. We don't have to do manual DOM manipulation or get confused about previous DOM state. We don't have to re-render the entire scene either, which could be much less efficient than patching it.
这篇关于为什么说 React 的 Virtual DOM 概念比脏模型检查的性能更高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
