反应虚拟DOM的目的到底是什么

Question

在经历反应时，我产生了以下疑问：

>

DOM操作非常昂贵

但是最终react也会进行DOM操作。我们无法使用虚拟DOM生成视图。

折叠整个DOM并构建它会影响用户体验。

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

例子：

>

当用户向下滚动时，我们将帖子附加到父元素，甚至react也必须以同样的方式执行。没有人会因此而毁掉整个dom。

当用户对一篇文章发表评论时，我们将一个div（comment元素（HTML代码））附加到该特定的文章评论列表中。我认为没有人会因为这个而毁掉整个帖子（dom）

3） 检查更改的“diffing”算法：

为什么我们需要一个算法来检查更改。示例：如果我有100篇文章，每当用户单击某篇文章的编辑按钮时，我都会按如下方式操作

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

我告诉DOM改变特定的元素，那么扩散有什么帮助呢？

我是不是想错了？如果有，请纠正我。

Answer 1

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

• 为什么React的虚拟DOM概念比脏模型检查更有效

还有一些其他的链接可以更好地解释这一点。

>

https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/

http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Answer 2

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

如果可以重建整个DOM呢？如果您编写了渲染方法并存储了状态，以便在任何时候都可以从头开始渲染整个页面？这消除了许多这些痛点，但显然您失去了手动更改DOM部分所获得的所有性能增益。

React和虚拟dom让您充分利用这两个世界。您可以得到优化的DOM更新，但作为开发人员，您不必保留整个应用程序的心智模型，也不必记住对于任何给定的用户或网络输入，您需要更改什么。虚拟dom还可能比您更有效地实现这些更改，只需重建您需要的元素。在某个时刻，你可能正在重建比“以防万一”更重要的东西。

希望这种说法有道理！