No.32: Virtual DOM 真的比操作原生 DOM 快吗？

动机/优势

1. 通过状态函数去表达视图
2. 手动操作DOM会很凌乱
3. 难以追踪DOM状态的变化
4. 更新DOM时按需更新，而不是重新生成所有的DOM

为什么需要Virtual DOM

当需要修改一个DOM节点的时候，如果使用传统的方法，会在两个点上消耗性能。

1. 找到这个DOM。如： document.getElementsByClass('item-li')[1]
2. 修改具体的DOM时，同时更新了不必要更新的DOM。如： document.getElementById('item-ul').innerHTML = xxx

随着页面的体量越来越大，只选择和更新对应的DOM显得越加重要。而Virtual DOM可以解决这个问题的。他可以在频繁更新DOM的环境中，提供更好的性能。Virtual DOM实际上是一个JS Object，他影射了实际的DOM结构，我们可以肆意的改动他，直到需要渲染的时候再修改实际的DOM节点。改动前后的JS Object可以的出来一个diff Object，根据这个diff Object，更新对应的DOM。