前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React进阶篇(三)diff算法(带Vue patch对比)

React进阶篇(三)diff算法(带Vue patch对比)

作者头像
娜姐
发布2020-12-02 14:55:48
1.4K0
发布2020-12-02 14:55:48
举报
文章被收录于专栏:娜姐聊前端娜姐聊前端

如何计算Virtual Dom中真正变化的部分,这就需要diff算法。

Virtual Dom配合高效的diff算法,才能够快速的渲染改动的页面,而不会渲染整个页面。

1. 跨层级移动

策略:针对节点进行比较。不同层级的节点,只有创建和删除操作。

影响性能操作,建议不要进行DOM 节点跨层级的操作。

图示如下(create A →create B →create C →delete A):

image

2. 同层级父节点移动

策略:

  1. 同类型组件:通过 shouldComponentUpdate() 来判断该组件是否需要进行diff 算法分析(所以可以利用shouldComponentUpdate()来优化组件性能)
  2. 不同类型组件:直接判断为dirty component,从而替换整个组件下的所有子节点

图示如下:

image

3. 同层级子节点移动

其提供三种操作方法:

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

注意:对于同一层级的一组子节点,它们可以通过唯一 id 进行区分(这就是为什么在批量创建同类型组件时需要添加key属性,并且建议将key定义为有意义的唯一标示,而不是index索引)。

对于列表节点顺序的调整其实也类似于插入或删除,如下图,从 shape5 转换到 shape6。

diff.png

即将同一层的节点位置进行调整。如果未提供 key,那么 React 认为 B 和 C 之后的对应位置组件类型不同,因此完全删除后重建

Vue的patch算法如何处理子节点数组? Vue在处理children数组时,会循环遍历newChildren(新列表),每循环到一个子节点,就去 > oldChildern(旧列表)中找和当前节点相同的那个旧子节点。

  • 如果在 oldChildern中找不到,就说明是新增节点,进行插入操作。
  • 如果找到了,就做更新操作;
  • 如果找到的旧节点和新节点位置不同,就需要移动旧节点。
  • 最后,oldChildern未被匹配到的节点会被删除。

Vue渲染列表时,如果提供key属性,那么,可以作为节点的唯一标识。那么在oldChildern中找相> 同节点时,可以直接通过key获取节点,无需通过循环来查找节点。 可见,Vue和React对于key的使用并不相同

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 跨层级移动
  • 2. 同层级父节点移动
  • 3. 同层级子节点移动
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档