在没有实际用到react之前,它给我的印象只有一个:虚拟dom,但是我对虚拟dom是什么完全没有概念
下面通过这段时间的工作实践谈一下自己对 Virtual Dom 的理解:
通过js操作数据生成js对象实例,然后跟上一次生成的(如果有) Virtual Dom 去 对比,得到一个补丁,然后把这个补丁打到浏览器的dom上去,之所以这样做是因为相同的操作js的速度比未手动优化的dom操作快的多,而这样是基于可维护性的考虑。
innerHTML vs. Virtual DOM 的重绘性能消耗:
而且Virtual DOM保证了
- innerHTML: render html string O(template size) + 重新创建所有 DOM 元素 O(DOM size)
- Virtual DOM: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change)
1 )不管你的数据变化多少,每次重绘的性能都可以接受;
2 )你依然可以用类似 innerHTML 的思路去写你的应用;
另附尤大的一条知乎回答(https://www.zhihu.com/question/31809713)