Question

在做出反应时，我想出了以下疑问：

DOM操作非常昂贵

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

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

示例：

当用户向下滚动时，我们会将帖子附加到父元素，甚至会做出反应也必须以同样的方式做到这一点。没有人为此彻底崩溃。
当用户对帖子发表评论时，我们会将div（评论元素（HTML code））附加到该特定帖子评论列表。我认为没有人会因为

3）“diffing”算法检查变化：

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

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

我告诉DOM改变特定元素，然后diffing如何帮助？

我是否以错误的方式思考？如果是这样，请纠正我。

Answer 1

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

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

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

Answer 2

你是正确的，当人们需要更新单个元素时，他们不会崩溃并重新创建整个DOM。相反，最佳做法是重建您需要的元素。但是，如果用户采取实际影响大量元素的操作会怎么样？喜欢它们的帖子或其他东西，你想在帖子上反映出来，也许在页面上的其他星星上。随着应用程序变得足够复杂，更改需要更改的页面的所有部分变得非常复杂且容易出错。另一位开发人员可能不知道页面上的其他位置存在“星号计数”，并且会忘记更新它。

如果您可以重建整个DOM怎么办？如果您编写了渲染方法并存储了您的状态，那么在任何时候，您都可以确定地从头开始渲染整个页面？这消除了很多这些痛点，但显然你失去了手动改变DOM部分所带来的所有性能提升。

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

希望这样有意义！

React Virtual DOM的目的究竟是什么

2 个答案: