react从入门到实践之react的虚拟DOM和Diff算法

一、react 的虚拟 DOM 和 Diff 算法

1. 虚拟 DOM和diff算法是 React中非常核心的两个概念, 我们需要对此有一个很全面的认知。这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助。

2. 对于虚拟 DOM的内部执行流程，如下所示：

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

3. 对于虚拟DOM的原理剖析，如下所示：

• Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，硬盘读取速度比较慢，我们会就在它们之间加缓存条；
• 反之, 既然 DOM 运行速度慢，那么我们就在 JS 和 DOM 之间加个缓存。JS 只操作 Virtual DOM，最后的时候再把变更的结果写入 DOM。

4. 对于 diff算法，如下所示：

• 如果两棵树的根元素类型不同，React会销毁旧树，创建新树
• 对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性; 当处理完这个 DOM 节点，React就会递归处理子节点。
• 遍历插入元素, 如果没有 key, React将改变每一个子删除重新创建; 为了解决这个问题，React提供了一个 key 属性。当子节点带有key属性，React会通过 key 来匹配原始树和后来的树。

5. 对于 diff 算法的执行过程，通过绑定 key, React就知道带有key '1024' 的元素是新的，对于 '1025' 和 '1026' 仅仅移动位置即可。

6. 对于其中 key 的使用注意，如下所示：

• key 属性只会在 React 内部使用，不会传递给组件
• 在遍历数据时，推荐在组件中使用 key 属性，
• {obj.t}
• key 只需要保持与他的兄弟节点唯一即可，不需要全局唯一
• 尽可能的减少数组 Index 作为 key，数组中插入元素的等操作时，会降低效率

7. 对于 react 的虚拟 DOM和Diff算法，可应用于九宫格案例，代码如下所示：