React，如何理解虚拟DOM，以及相关优质博客推荐

React在Virtual DOM上实现了DOM diff算法，当数据更新时，会通过diff算法计算出相应的更新策略，尽量只对变化的部分进行实际的浏览器的DOM更新，而不是直接重新渲染整个DOM树，从而达到提高性能的目的。

你给我一个数据，我根据这个数据生成一个全新的Virtual DOM，然后跟我上一次生成的Virtual DOM去 diff，得到一个Patch，然后把这个Patch打到浏览器的DOM上去。

你不要一步一步告诉我这件事情怎么做，什么先和面再剁馅，NO，告诉我你想要煎饼还是月饼，我会想办法去做的，不要来干扰我。

哪怕是我生成了virtual dom，哪怕是我跑了diff，但是我根据patch简化了那些DOM操作省下来的时间依然很可观。所以总体上来说，还是比较快。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

 

1.深入理解react中的虚拟DOM、diff算法

2.深度剖析：如何实现一个 Virtual DOM 算法

3.https://github.com/Matt-Esch/virtual-dom

4.如何理解虚拟DOM?

5.mvc mvp mvvm：界面之下：还原真实的MV*模式

6.理顺react，flux，redux这些概念的关系

7.React.js 小书