浅析react怎么做diff

前文

react架构浅析

通过前文了解了react的整体架构，我们可以知道diff过程发生在react的reconcile阶段

diff算法

• react初次渲染的时候不用diff，vdom直接转fiber
• 再次渲染的时候，生成新的vdom后，在转fiber的过程当中，会尽量复用之前的节点

dif流程分为两轮：

• 第一轮遍历：

  • 对比 vdom 和老的 fiber，如果可以复用就处理下一个节点，否则就结束遍历。如果所有的新的 vdom 处理完了，那就把剩下的老 fiber 节点删掉就行。如果还有 vdom 没处理，那就进行第二次遍历。

• 第二轮遍历：

  • 把剩下的老 fiber 放到 map 里，map的key值就是fiber节点的key值，遍历剩下的 vdom，从 map 里查找有没有可以复用的，如果找到了，就移动过来，打上更新的 effectTag
  • 然后遍历完后，剩下的老 fiber 节点删掉，剩下的新 vdom 新增。

总结

diff的核心：为了找到可复用的节点

react diff的对象：新的vdom和老的fiber做作对比

流程：分为两轮，第一轮不全就继续第二轮，第二轮利用了map数据结构进行fiber节点的快速查找

参考：

juejin.cn/post/713174…