react的Virtual DOM

时间:2022-06-07 10:53:23

一、Virtual DOM
Virtual DOM是一个JavaScript对象,v8引擎使得js可以高效运行,而直接操作DOM很慢。
Virtual DOM本质上就是在JS和DOM之间做了一个缓存。可以类比CPU和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存;既然DOM这么慢,我们就在JS和DOM之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。
二、Virtual DOM算法
Virtual DOM算法主要做3件事:
1、用js对象模拟dom树生成Virtual DOM树,把真正的dom树插入文档;
2、状态变更时,重新构造一个对象树,对比新旧两棵树、记录差异;
3、把记录的差异应用在真正的dom树上,更新视图。
其中,对比两棵树的差异,即Virtual DOM的diff算法,一旦数据变化,针对性的对局部视图做调整,而不是变更整个dom树。两棵树的完全diff算法时间复杂度为n的3次方,O(n^3),一般情况下是O(n),因为Virtual DOM只比较同级节点,记录差异,采用深度优先遍历。

三、组件性能优化
react组件性能优化,每次setState方法的调用都会重绘整个子树。如果你想优化性能,那么尽量在较“低”的节点上调用setState方法,或者自己实现shouldComponentUpdate方法来阻止整个子树的重绘。

四、参考链接

http://www.w3cplus.com/javascript/understand-the-Virtual-DOM.html
http://www.w3cplus.com/javascript/Virtual-DOM-diff.html

https://hulufei.gitbooks.io/react-tutorial/content/index.html

http://www.jianshu.com/p/83bda9cd8c67

https://reactjs.org/

https://github.com/facebook/react

五、虚拟dom和createDocumentFragment的区别

都是把多次DOM操作做一个批处理,只是前者建立在创建元素节点上,容易修改。后者建立一个片段,就是一次性使用,不方便修改。