问题描述
在做出反应时,我想到了以下疑问:
While going through react I came up with the following doubts:
-
DOM操作非常昂贵
DOM operations are very expensive
但是最终,DOM操作也会做出反应.我们无法使用虚拟DOM生成视图.
But eventually react also does the DOM manipulation. We cannot generate a view with Virtual DOM.
折叠整个DOM并构建它会影响用户体验.
Collapsing the entire DOM and building it affects the user experience.
我从没做过,主要是我要更改所需的子节点(而不是折叠整个父节点)或附加JS生成的HTML代码.
I never did that, Mostly what I do is changing the required child node(Instead of collapsing entire parent) or appending HTML code generated by JS.
示例:
-
当用户向下滚动时,我们会将帖子添加到父元素,甚至做出反应也必须以相同的方式来做.没有人为此崩溃整个dom.
As a user scrolls down we append posts to parent element, even reactalso have to do it in same way. No one collapse entire dom for that.
当用户对帖子发表评论时,我们会将div(评论元素(HTML代码))添加到该特定的帖子评论列表中.我认为没有人会为此折叠整个帖子(dom)
When a user comment on a post we append a div(comment element(HTML code)) to that particular post comment list. I think no one collapse entire post(dom) for that
3)差异"算法来检查更改:
3) "diffing" algorithm to check changes:
为什么我们需要一种算法来检查更改.例子:如果我有100条帖子,每当用户单击特定帖子的编辑"按钮时,我都会按照以下步骤进行操作
Why we need a algorithm to check changes.Example:If I have a 100 posts, whenever a user clicks on edit button of a particular post, i do it as follows
$(".postEdit").click(function(){
var post_id = $(this).data("postid");
//do some Ajax and DOM manipulation to that particular post.
})
我告诉DOM更改特定元素,那么差异化如何提供帮助?
I am telling the DOM to change particular element, then how does diffing help?
我是否以错误的方式思考?如果是这样,请纠正我.
Am I thinking in a wrong way? If so, please then correct me.
推荐答案
此讨论对于理解虚拟DOM及其在不同UI框架中的实现很有帮助.
This discussion can be very helpful to understand Virtual DOM and it's implementation in different UI frameworks.
还有一些其他链接可以更好地解释它.
There are couple of other links as well which explains it in better way.
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
这篇关于React Virtual DOM的确切目的是什么的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!