react的Virtual DOM

一、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操作做一个批处理，只是前者建立在创建元素节点上，容易修改。后者建立一个片段，就是一次性使用，不方便修改。

转载于:https://www.cnblogs.com/camille666/p/react_update_dom.html