Question

react 里面的 virtual DOM的效率为什么比直接操作DOM更快

Answer 1

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。你要我显示什么就给我一个完整的列表。