react 里面的 virtual DOM的效率为什么比直接操作DOM更快
1个回答
2017-06-01
展开全部
React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面。1.VirtualDom快,有两个前提1.1Javascript很快Chrome刚出来的时候,在Chrome里跑Javascript非常快,给了其它浏览器很大压力。而现在经过几轮你追我赶,各主流浏览器的Javascript执行速度都很快了。Julia有一个Benchmark,JuliaBenchmarks,可以看到Javascript跟C语言很接近了,也就几倍的差距,跟Java基本也是一个量级。所以说,单纯的Javascript其实速度是很快的。多说一句,这种benchmark并不是绝对的依据,因为用这个语言写这个跑得快,并不代表一定是用这个语言写那个也跑得快。1.2DOM很慢关于什么CSS,什么layout那些我不懂,就不瞎说了,咱就说说DOM的结构。当你用document.createElement()创建一个空的Element的时候(比如创建一个空的div),有以下这几页的东西需要实现(当然,这不是标准,只是个大概的意思):HTMLElement-WebAPIInterfacesElement-WebAPIInterfacesGlobalEventHandlers非常非常多,并且还有不少嵌套引用。你可以在Chromeconsole里手动调用document.createElement然后插入DOM里看看效果。这还是一个空的Elemnt,啥内容也没有,就这么复杂。所以说DOM的操作非常慢是可以理解的。不是浏览器不想好好实现DOM,而是DOM设计得太复杂,没法。而更糟糕的是,我们(以及很多框架)在调用DOM的API的时候做得不好,导致整个过程更加的慢。React的VirtualDom解决的是这一部分问题,它并不能解决DOM本身慢的问题。比如说,现在你的list是这样,0123你想把它变成这样678910通常的操作是什么?先把0,1,2,3这些Element删掉,然后加几个新的Element6,7,8,9,10进去,这里面就有4次Element删除,5次Element添加。而React会把这两个做一下Diff,然后发现其实不用删除0,1,2,3,而是可以直接改innerHTML,然后只需要添加一个Element(10)就行了,这样就是4次innerHTML操作加1个Element添加,比9次Element操作快多了吧?当然还有其它一些例子能够优化我们对DOM的操作,就不举例子了。(实际上是因为我举不出例子。。。)2.关于React2.1接口和设计在React的设计里,是完全不需要你操作DOM的。在React里其实根本就没有DOM这个概念的存在,只有Component。当你写好一个Component以后,Component会完全负责UI,你不需要也不应该去也不能够指挥Component怎么显示,你只能告诉它你想要显示一个香蕉还是两个梨。隔离DOM并不是因为DOM慢(当然DOM确实慢),而是把界面和业务完全隔离,操作数据的只关心数据,操作界面的只关心界面。可以想象成把MVC里面的Controller分成两个部分,一部分合并到M里面去,一部分合并到V里面去,就剩下MV,没有C了。。。其实M也并不是Model了。推荐看一下PeteHunt的这个Talk重复一遍,React的意思是,我提供一个Component,然后你只管给我数据,界面的事情完全不用你操心,我保证会把界面变成你想要的样子。你可以把一个React的Component想象成一个PureFunction,只要你给的数据是[1,2,3],我保证显示的是[1,2,3]。没有什么删除一个Element,添加一个Element这样的事情。NO。你要我显示什么就给我一个完整的列表。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询