抄书之virtualDOM

摘抄自《深入浅出React和Redux》章节：5.2 P115
为什么要抄书呢，因为个人感觉书上确实讲的很透彻清晰，欢迎看官们补充延申...
React组件生命周期：装载、更新、卸载。

• 下面是virtualDOM的产生

在装载过程中，React通过render方法在内存中产生了一个树形的结构，书上每一个节点代表一个React组件或者原生的DOM元素，这个树形结构就是所谓的Virtual DOM。React根据这个Virtual DOM来渲染产生浏览器中的DOM树。

virtualDOM就是javascript对象，在内存中发生对比行为
借个图

virtualDOM VNode结构

• 时间复杂度比较

按照计算机科学目前的算法研究结果，对比两个N个节点的树形结构的算法，时间复杂度是O(N³)。
React实际采用的算法需要的时间复杂度是O(N)。

当用户与页面发生交互，此时就需要更新页面，涉及到virtualDOM的比较逻辑

• 比较正文
  1.比较两棵树根节点类型（DOM元素、React组件），不同则直接卸载旧的DOM树，渲染新的DOM树；若相同则比较节点属性，属性不同则只需更新属性（DOM元素：类名、样式等，React组件：props）。依次遍历每一个节点、子节点
  2.动态循环列表的情况，这里类似于排号，举例：现有1，2，3号，后面来的排队发号4，5，6，前面的不动，只需要添加后三位（无需重新渲染整个组件）；假如有一人插队到第一位去，那么所有号就必须变1->2,2->3,3->4（虽然只添加了一项，但是会渲染整个组件）。
  看到这里，我相信大家就想到了key这个东西
  3.此刻，key作为每个人的身份证号出现了，那么此时的排号顺序就不重要了，virtualDOM的对比只需要看各位的key所对应的项。所以，这里就强调每一项的key值必须是唯一且不可变的，这里也是各位使用索引号index有时会报警告的原因（数组的每一项所对应的index是可变的，和排队相似）。
  这就结束了，啰里啰唆一大堆，有不明白或者抄的不对的地方，还请各位指正！！！