diff算法、fiber链表
步骤：（追求多复用，快渲染）
-
首次渲染，缓存虚拟dom或fiber链表（17及以后）；
-
组件更新，将新生成的虚拟dom与已有的真实dom的fiber链表对比；
-
遵循同级对比、深度对比原则，先依次找节点对比；
-
对比过程中，第一轮对比：按链表顺序对比，节点key值相同进一步比较标签、内容，并进行标记；
-
当发现节点key不同时，则第一轮结束，开始从头开始第二轮对比；
-
第二轮对比，是新的虚拟dom从第一轮中断的位置开始与fiber链表的map映射表对比；
-
第二轮对比是以新虚拟dom的顺序从第一轮中断的位置开始依次进行，不是与映射表相同索引节点比较，而是去映射表找相同key值的节点比较，并给映射表的节点做相应标记；
-
最多两轮后，依次得到：要删除的8、要更新的或复用的4（只内容不同或相同）、要移动位置的6、要新增的2，不变的不做标记；文章来源：https://www.toymoban.com/news/detail-585047.html
-
处理：要删除的、不变的和复用的、移动的、新增的；文章来源地址https://www.toymoban.com/news/detail-585047.html
到了这里，关于【react】react18的学习（十一）– 底层原理（一）之 diff 算法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
