作为一名初学React的小白,我想知道React是怎么进行Dom节点的对比和更新的?我现在大致知道react为了性能的优化,在React16引入了fiber的架构。了解了虚拟Dom其实是一个对象,然后再用虚拟Dom比对进行渲染。我想知道具体在比对Dom的过程当中,React是怎么进行对比的。看了一些博客还是一头懵,有大佬能解释一下这个吗,或者我应该如何一步步的进行学习?谢谢!
作为一名初学React的小白,我想知道React是怎么进行Dom节点的对比和更新的?我现在大致知道react为了性能的优化,在React16引入了fiber的架构。了解了虚拟Dom其实是一个对象,然后再用虚拟Dom比对进行渲染。我想知道具体在比对Dom的过程当中,React是怎么进行对比的。看了一些博客还是一头懵,有大佬能解释一下这个吗,或者我应该如何一步步的进行学习?谢谢!
理论是:深度优先遍历对比 每个虚拟DOM 节点是否存在变更,过程中会通过一些 缓存机制 来跳过明确知道不需要对比的 子树 来提高效率
当然如果要看具体实现细节就直接去看 react-reconciler 源码中的 diff 算法
8 回答4.6k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
6 回答2.2k 阅读
5 回答6.3k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
3 回答2.5k 阅读✓ 已解决
如果能读懂源码的话,直接看这里 react/ReactChildFiber.new.js。
如果看不懂的话并不建议深入了解,因为看了也是会忘记的。