React学习系列(一)

react16以前的diff算法

虚拟dom树是一个tree结构,每一个DOM节点是一个对象,存储对应的虚拟DOM信息,更新时通过树的遍历实现DOM树的更新。

tree比较

通过遍历更新前后树的结构进行比较,若更新前后相同深度的节点结构不同,则删掉更新前的节点并停止当前节点的更深层次比较

component比较

react假设不同的component具有不同的结构,若component不同则删除原节点并停止更深层次的比较,然后创建新的节点。

数组元素比较

数组元素默认通过key进行比较,若不存在key则采用index进行比较,为提高性能建议给数组元素key赋值

  • 插入:直接插入
  • 删除:直接删除
  • 移动:当旧列表中的元素所在位置小于在新列表中元素位置时才会移动元素位置,且把上一次在旧列表中查找到元素位置设置为下一次查找的起始位置

待做

  • react16之后的版本把虚拟DOM改为链表结构,使用Fiber进行比较,其比较算法实现