首页 > 其他 > 详细

react 中的diff

时间:2020-12-18 16:54:54      阅读:37      评论:0      收藏:0      [点我收藏+]

react中使用 Virtual DOM (用js来描述dom),使用diff来比较更新,减少性能损耗

diff策略

· tree diff

每一次更新生成两个dom树,按照层级进行对比,如果相对应的层级发生变化,只有删除和增加

技术分享图片

 

 ·component diff 

如果是同一类型的组件,就继续按照tree diff进行,如果不是替换组件下的所有节点,对于同一类型的组件,有可能其 Virtual DOM 没有任何变化,如果能够确切的知道这点那可以节省大量的 diff 运算时间,因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

 ·element diff

当节点处于同一层级时,React diff 提供了三种节点操作,分别为:INSERT_MARKUP(插入)、MOVE_EXISTING(移动)和REMOVE_NODE(删除)。

  • INSERT_MARKUP,新的 component 类型不在老集合里, 即是全新的节点,需要对新节点执行插入操作。
  • MOVE_EXISTING,在老集合有新 component 类型,且 element 是可更新的类型,generateComponentChildren 已调用 receiveComponent,这种情况下 prevChild=nextChild,就需要做移动操作,可以复用以前的 DOM 节点。
  • REMOVE_NODE,老 component 类型,在新集合里也有,但对应的 element 不同则不能直接复用和更新,需要执行删除操作,或者老 component 不在新集合里的,也需要执行删除操作。

 

react 中的diff

原文:https://www.cnblogs.com/gaoC/p/14155203.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!