react 学习 - 1. 虚拟 DOM

在 react 中，页面的构建需要进行七个步骤：

1. 获取 state 数据
2. 获取 JSX 模板
3. 数据 + 模板 生成虚拟 DOM 树
4. 根据虚拟 DOM 树创建真实的 DOM
5. 监听 state 数据变化
6. 数据 + 模板 生成新的 DOM 树，与旧的模板比对其中的差异
7. 操作 DOM，改变 DOM 内容

在此过程中可以实现数据与页面的同步刷新。

在 react 中，比对虚拟 DOM 使用 Diff 算法。

思路：在 react 中，只有在 setState 的时候才会生成新的虚拟DOM，所以只需要处理 setState 带来的数据改变，这样会节约性能。在 setState 时，如果若干个 setState 同时或者间隔非常短的时间内执行，就会触发多次比对，这不是我们想要的，所以需要对这些内容进行处理。

Diff 算法采用同层比对，只要第一层不一样，下面的子节点都重新渲染。
这样可能会造成性能的浪费，但是算法相对于简单，可以节约算法的复杂度，也会节约性能。
Diff 算法需要虚拟 DOM 中存有 key 值，这样可以快速的找到比对差异