React是怎么对比Dom节点并进行更新的?

作为一名初学React的小白,我想知道React是怎么进行Dom节点的对比和更新的?我现在大致知道react为了性能的优化,在React16引入了fiber的架构。了解了虚拟Dom其实是一个对象,然后再用虚拟Dom比对进行渲染。我想知道具体在比对Dom的过程当中,React是怎么进行对比的。看了一些博客还是一头懵,有大佬能解释一下这个吗,或者我应该如何一步步的进行学习?谢谢!

阅读 1.5k
2 个回答

如果能读懂源码的话,直接看这里 react/ReactChildFiber.new.js
如果看不懂的话并不建议深入了解,因为看了也是会忘记的。

理论是:深度优先遍历对比 每个虚拟DOM 节点是否存在变更,过程中会通过一些 缓存机制 来跳过明确知道不需要对比的 子树 来提高效率

当然如果要看具体实现细节就直接去看 react-reconciler 源码中的 diff 算法

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏