【react】react18的学习（十一）– 底层原理（一）之 diff 算法

diff算法、fiber链表

步骤：（追求多复用，快渲染）

• 首次渲染，缓存虚拟dom或fiber链表（17及以后）；

• 组件更新，将新生成的虚拟dom与已有的真实dom的fiber链表对比；

• 遵循同级对比、深度对比原则，先依次找节点对比；

• 对比过程中，第一轮对比：按链表顺序对比，节点key值相同进一步比较标签、内容，并进行标记；

• 当发现节点key不同时，则第一轮结束，开始从头开始第二轮对比；

• 第二轮对比，是新的虚拟dom从第一轮中断的位置开始与fiber链表的map映射表对比；

• 第二轮对比是以新虚拟dom的顺序从第一轮中断的位置开始依次进行，不是与映射表相同索引节点比较，而是去映射表找相同key值的节点比较，并给映射表的节点做相应标记；

• 最多两轮后，依次得到：要删除的8、要更新的或复用的4（只内容不同或相同）、要移动位置的6、要新增的2，不变的不做标记；

• 处理：要删除的、不变的和复用的、移动的、新增的；