React Virtual DOM 的目的到底是什么答案

【问题标题】：What exactly the purpose of React Virtual DOMReact Virtual DOM 的目的到底是什么
【发布时间】：2017-05-15 13:22:31
【问题描述】：

在进行反应时，我提出了以下疑问：

DOM 操作非常昂贵

但最终 react 也会进行 DOM 操作。我们无法使用 Virtual DOM 生成视图。
折叠整个 DOM 并构建它会影响用户体验。

我从来没有这样做过，我所做的主要是更改所需的子节点（而不是折叠整个父节点）或附加由 JS 生成的 HTML 代码。

例子：

当用户向下滚动时，我们会将帖子附加到父元素，甚至做出反应也必须以同样的方式进行。没有人为此而崩溃整个 dom。
当用户对帖子发表评论时，我们会将 div（评论元素（HTML 代码））附加到特定的帖子评论列表中。我认为没有人为此折叠整个帖子（dom）

3) 检查变化的“差异”算法：

为什么我们需要一种算法来检查更改。例子：如果我有 100 个帖子，每当用户点击特定帖子的编辑按钮时，我都会按以下方式进行操作

   $(".postEdit").click(function(){
        var post_id = $(this).data("postid");
        //do some Ajax and DOM manipulation to that particular post.
   })

我正在告诉 DOM 更改特定元素，那么差异有什么帮助？

我的想法有问题吗？如果是这样，请纠正我。

【问题讨论】：

阅读this answer至：Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

标签： reactjs dom

【解决方案1】：

您说得对，当人们需要更新单个元素时，他们不会倾向于折叠并重新创建整个 DOM。相反，最佳实践是重建您需要的元素。但是，如果用户采取的行动实际上会影响很多元素呢？就像他们为帖子或其他内容加注星标一样，您想在帖子上反映这一点，并且可能在页面其他地方的星数中反映出来。随着应用程序变得足够复杂，更改页面中需要更改的所有部分变得非常复杂且容易出错。另一位开发人员可能不知道页面上的其他地方有“星数”而忘记更新它。

如果你可以重建整个 DOM 会怎样？如果您编写了渲染方法并存储了您的状态，以便在任何时候都可以肯定地从头开始渲染整个页面？这消除了很多这样的痛点，但显然你失去了通过手动更改 DOM 的某些部分而获得的所有性能提升。

React 和虚拟 dom 让您两全其美。您可以获得优化的 DOM 更新，但作为开发人员，您不必保留整个应用程序的心智模型并记住您需要为任何给定的用户或网络输入更改的内容。虚拟 dom 也可能比您更有效地实现这些更改，只需重建您需要的元素。在某些时候，您可能会“以防万一”进行重建。

希望这是有道理的！

【讨论】：

【解决方案2】：

这个讨论对于理解 Virtual DOM 及其在不同 UI 框架中的实现非常有帮助。

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

还有几个其他链接可以更好地解释它。

【讨论】：