React中的虚拟DOM

• 虚拟DOM是什么？

  • 一个虚拟DOM(元素)是一个一般的js对象，准备的说是一个对象树（倒立的）
  • 虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应
  • 如果只是更新虚拟DOM，页面是不会重绘的

• Virtual DOM 算法的基本步骤

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

进一步理解

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