REACT数据变化中的diff

REACT数据变化中的diff

diff在React中起到的做用。

在React中监听数据变化默认是通过比较引用（diff）进行，diff配合虚拟dom进行使用，diff会计算出虚拟dom中真正发生变化的部分，并且针对这部分dom进行操作从而避免对页面进行大面积的更新渲染，减小性能开销。

Reac对diff的处理

传统的diff算法复杂度高达O(n^3)，效率很低。为了解决这个问题，React定义了三种策略，在对比时，根据策略只需要遍历一次树，即可以完成对比，降低复杂度至O(n);

1. tree diff: 在两个树比较时，只比较同一层级的节点。会忽略掉跨层级的操作。
2. component diff: 在对比两个组件时，首先判断类型，如果不同则直接销毁创建新的组件。
3. element diff: 对于同一层级的一组结点，会使用具有唯一性的key来区分是否需要创建，删除或移动。