React提高04 对虚拟DOM和加载过程的理解

已同步到个人博客，欢迎访问。

React虚拟DOM的理解

（1）用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

（2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

（3）把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

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

虚拟DOM是用JS的对象结构模拟出HTML中DOM的结构，批量的增删改查，由于直接操作的是JS对象，所以速度要比操作真实DOM要快，最后更新到真正的DOM中

虚拟DOM构建的对象，除了DOM相关属性，还包括了React自身需要的属性，比如ref，key等，大概如下结构：

{
  type: 'div',
  props: {
    className: 'xxx',
    children: [{
      type: 'span',
      props: {
        children: ['CLICK ME']
      },
      ref: key:
    }, {
      type: Form,
      props: {
        children: []
      },
      ref: key:
    }] | Element
  }
  ref: 'xxx',