CHANSHIYU
GITHUBZERO
  • README
  • 時雨
    • 2017
      • 01 网站动态标题的两种方式
      • 02 RN App 外部唤醒踩坑记
    • 2018
      • 01 不一样の烟火
      • 02 Python 之禅
      • 03 Python 文件操作
    • 2019
      • 01 Aurora 食用指南
      • 02 Godaddy 域名找回记事
      • 03 一个接口的诞生
      • 04 SpringMVC 前后端传参协调
      • 05 主题集成友链访问统计
      • 06 Github Style 博客主题
      • 07 字符编码の小常识
      • 08 WSL 安装 Docker 实录
      • 09 Eriri comic reader
      • 10 Aurora 2.0
      • 11 jsDelivr 全站托管
      • 12 两年工作台变迁史
      • 13 春物
      • 14 一种优雅の笔记方式
    • 2020
      • 01 Telegram 电报机器人
      • 02 她的眼里有星辰
      • 03 文心雕龙
      • 04 软萌木子の有趣笔谈
      • 05 Telegram RSS 订阅频道
      • 06 水月雨银色飞船
      • 07 五年前旧照
    • 2021
      • 01 春宵苦短 2020
      • 02 风花
    • 2022
      • 01 小城新貌
      • 02 原神满级纪念
    • 2023
      • 01 2022 逆旅
      • 02 半透明背景图实现
      • 03 新年攒台海景房
  • 前端
    • JavaScript
      • 01 JavaScript 秘密花园
      • 02 JavaScript 正则技巧
      • 03 从浏览器解析 JS 运行机制
      • 04 Canvas 基础用法
      • 05 Blob Url And Data Url
      • 06 函数节流与函数防抖
      • 07 排序算法初探
      • 08 洗牌算法实现数组乱序
      • 09 正则匹配 match 和 exec
      • 10 正则匹配汉字
      • 11 JSX.Element vs ReactElement
      • 12 可选链与空值合并
      • 13 TypeScript 编码规范
      • 14 Typescript 中 interface 和 type 区别
      • 15 TypeScript 高级类型
      • 16 TypeScript 关键字
      • 17 TypeScript 映射类型
    • CSS
      • 01 Flex 弹性布局
      • 02 Position 定位
      • 03 CSS 逻辑属性
    • Node
      • 01 Node Tips
      • 02 七天学会 NodeJS
    • Note
      • 01 Note
      • 02 Code
      • 03 Snippets
      • 04 Git
    • React
      • 01 React Props Children 传值
      • 02 Use a Render Prop!
      • 03 React Hook
      • 04 React Hook 定时器
      • 05 Fetch data with React Hooks
      • 06 React 和 Vue 中 key 的作用
      • 07 useCallback 的正确使用方式
      • 08 useLayoutEffect 和 useEffect 的区别
      • 09 forwardRef 逃生舱
      • 10 React 条件渲染
    • Vue
      • 01 Vue Tips
      • 02 Vue 构建项目写入配置文件
      • 03 Vue 项目引入 SVG 图标
      • 04 Vue 一键导出 PDF
      • 05 动态可响应对象
      • 06 Vue 引入 SCSS
      • 07 Vue 路由权限控制
    • 实战系列
      • 01 WebSocket 心跳重连机制
      • 02 图片加解密二三事
      • 03 优雅实现 BackTop
      • 04 动态加载 JS 文件
      • 05 常用 DOM 方法比较
      • 06 AbortController 中断 fetch
      • 07 计算字符所占字节数
      • 08 Axios 自定义返回值类型
  • 后端
    • Java
      • 01 面向对象基本特征与原则
      • 02 Java 数据类型
      • 03 Java String
      • 04 Java 只有值传递
      • 05 Java final 与 static
      • 06 Java Object 通用方法
      • 07 Java 继承
      • 08 Java 反射
      • 09 Java 异常
      • 10 Java 容器
      • 11 Java 虚拟机
      • 12 Java IO
      • 13 Java HashMap
      • 14 Java List
      • 15 Java Stream
      • 16 Java 枚举
      • 17 Java 日期与时间
      • 18 Java fail fast
      • 19 Java BiFunction 和 BinaryOperator
    • 并发编程
      • 01 Java 并发
      • 02 synchronized
      • 03 volatile
      • 04 ReentrantLock
      • 05 ReadWriteLock
      • 06 StampedLock
      • 07 CompletableFuture
      • 08 ForkJoin
      • 09 ThreadLocal
      • 10 CountDownLatch
      • 11 ThreadPoolExecutor
      • 12 ExecutorService
      • 13 Atom 原子类
      • 14 BlockingQueue
    • 高效编程
      • 01 30 seconds of java8
      • 02 函数式替代 for 循环
      • 03 Java 字符串拼接
      • 04 单例模式的几种实现
      • 05 HashMap 排序
    • 理论概念
      • 01 Java Servlet
      • 02 Java 服务端分层模型
      • 03 经典排序算法
      • 04 LRU 缓存淘汰算法
      • 05 BloomFilter 判断元素存在
      • 06 Java HashMap 面试大全
      • 07 HTTP 状态码详解
      • 08 Cookie 和 Session
      • 09 基于消息队列的分布式事务解决方案
      • 10 微服务之所见
    • 实战系列
      • 01 AES CBC 加解密
      • 02 Magic 魔数获取文件类型
      • 03 获取请求 IP 地址
      • 04 Kaptcha 与数学公式验证码
      • 05 Netty 获取客户端 IP.md
      • 06 高性能无锁队列 Disruptor.md
      • 07 前后端接入阿里云盾
    • Linux
      • 01 Linux 文件权限系统
      • 02 Linux 常用软件安装
      • 03 CentOS 防火墙
    • MySQL
      • 01 MySQL
      • 02 SQL 语句 where 1=1
      • 03 truncate 和 delete
      • 04 事务
      • 05 关系模型
      • 06 Mybatis
      • 07 MySQL 查看数据库表详情
    • Nginx
      • 01 Nginx 指北
      • 02 nginx gzip 压缩
    • Note
      • 01 Vagrant
      • 02 Docker
      • 03 Lombok
      • 04 Swagger
      • 05 Redis
    • Spring
      • 01 Spring Boot
      • 02 Spring Validation
      • 03 Spring Data
      • 04 Spring 容器
      • 05 Spring AOP
      • 06 Spring Transactional 注解
      • 07 Spring Cloud Netflix
      • 08 Spring Cloud Alibaba
      • 09 Spring Security oAuth2
      • 10 Spring Boot 跨域解决方式
      • 11 Spring Boot 请求拦截
      • 12 Spring Boot 异步编程
      • 13 Spring Boot 定时任务
      • 14 Spring Boot 管理 bean
      • 15 Mybatis 逆向代码生成
      • 16 JWT
      • 17 JPA
      • 18 Apache Shiro
      • 19 Spring 异步请求
  • 书斋
    • ES6 标准入门
      • 01 变量声明与解构赋值
      • 02 语法的扩展
      • 03 数据类型与数据结构
      • 04 Proxy 和 Reflect
      • 05 异步编程 Promise
      • 06 Iterator 和 for of 循环
      • 07 Generator 函数
      • 08 Async 函数
      • 09 Class 类
    • JavaScript 设计模式
      • 01 基础知识
      • 02 设计模式(上)
      • 03 设计模式(下)
      • 04 设计原则和编程技巧
  • 纸函
    • 01 Interview
    • 02 Ceph
    • 03 动态规划
    • 04 Document.designMode
    • 2023-01-10
  • 万藏
    • 文档
      • 01 Git 文档
      • 02 Linux 命令大全
      • 03 七天学会 NodeJS
      • 04 Algorithms
    • 工具
      • 01 Nginx Config
      • 02 ProcessOn
      • 03 Flat Icon
      • 04 Regexper
      • 05 TempMail
      • 06 Carbon
由 GitBook 提供支持
在本页
  • virtual dom
  • diff 算法
  • key 的作用

这有帮助吗?

  1. 前端
  2. React

06 React 和 Vue 中 key 的作用

virtual dom

virtual dom,即虚拟 dom,虚拟 dom 对应的是真实 dom,使用 document.CreateElement 和 document.CreateTextNode 创建的就是真实节点。

为什么需要虚拟 dom?其目的是通过简单对象来代替复杂的真实 dom 对象。我们可新建一个真实 dom 并打印其属性,会发现真实 dom 上绑定了太多属性,如果每次都重新生成新的元素,对性能是巨大的浪费。

const mydiv = document.createElement("div")
// 真实 dom 上实现了太多标准
for (const k in mydiv) {
  console.log(k)
}

虚拟 dom 上存储了真实 dom 上的一些重要属性,在改变 dom 之前,会先比较相应虚拟 dom 的数据,如果需要改变,才会将改变应用到真实 dom 上,这样能大大提升性能。在 vue 中,一个虚拟节点模型如下:

{
  el:  div  // 对真实的节点的引用
  tag: 'DIV',   // 节点的标签
  sel: 'div#v.classA'  // 节点的选择器
  data: null,       // 一个存储节点属性的对象,对应节点的 el[prop] 属性,例如 onclick , style
  children: [], // 存储子节点的数组,每个子节点也是 vnode 结构
  text: null,    // 如果是文本节点,对应文本节点的 textContent,否则为 null
}

需要注意的是:virtual dom 很多时候都不是最优的操作,但它具有普适性,在效率、可维护性之间达平衡。通过手工优化 dom 或许会比 virtual dom 效率高,但是花费大量时间且维护性不高,virtual dom 只是效率与性能两者间的一种权衡。

virtual dom 另一个重大意义就是提供一个中间层,通过 js 去写 ui,而 ios 安卓之类的负责渲染,就像 RN 一样。

diff 算法

比较只会在同层级进行, 不会跨层级比较,以下图为例,了解下 diff 过程中的 dom 比较流程:

<!-- 层级1 -->
<div>
  <!-- 层级2 -->
  <p>
    <!-- 层级3 -->
    <b> aoy </b>
    <span>diff</span>
  </p>
</div>

<!-- 层级1 -->
<div>
  <!-- 层级2 -->
  <p>
    <!-- 层级3 -->
    <b> aoy </b>
  </p>
  <span>diff</span>
</div>

上面例子中,我们期望是将层级 3 的 <span> 移动到层级 2 的 <p> 之后,但实际上并不会如此操作,diff 算法会移除掉之前的 <span> 并新建一个 <span> 插入到 <p> 之后,而不会直接复用,因为比较只会在同层进行,不会跨层级比较。

function patch(oldVnode, vnode) {
  if (sameVnode(oldVnode, vnode)) {
    patchVnode(oldVnode, vnode)
  } else {
    const oEl = oldVnode.el
    let parentEle = api.parentNode(oEl)
    createEle(vnode)
    if (parentEle !== null) {
      api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
      api.removeChild(parentEle, oldVnode.el)
      oldVnode = null
    }
  }
  return vnode
}

patch 函数的两个参数 oldVnode、vnode 分别代表新旧两个虚拟节点。在进行 patch 之前,vnode 还没有对应的真实 dom,所以其 el 属性为 null。

在 patch 时候,先比较新旧两个节点是否值得比较:

if (sameVnode(oldVnode, vnode)) {
  patchVnode(oldVnode, vnode)
}

// Vue 真实的 sameVnode 函数
function sameVnode(a, b) {
  return (
    a.key === b.key &&
    ((a.tag === b.tag &&
      a.isComment === b.isComment &&
      isDef(a.data) === isDef(b.data) &&
      sameInputType(a, b)) ||
      (isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)))
  )
}

如果 sameVnode(a, b) 返回 false,即新旧两个节点不值得比较的话,会进行节点替换:

if (sameVnode(oldVnode, vnode)) {
  /* 值得比较,执行 patchVnode */
  patchVnode(oldVnode, vnode)
} else {
  /* 不值得比较 */
  const oEl = oldVnode.el
  // 取得父节点
  let parentEle = api.parentNode(oEl)
  // 创建真实 dom
  createEle(vnode)
  if (parentEle !== null) {
    // 插入新节点,移除旧节点
    api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
    api.removeChild(parentEle, oldVnode.el)
    oldVnode = null
  }
}

return vnode

过程如下:

  • 取得 oldvnode.el 的父节点,parentEle 是真实 dom

  • createEle(vnode) 会为 vnode 创建它的真实 dom,令 vnode.el 对应真实 dom

  • parentEle 将新的 dom 插入,移除旧的 dom,当不值得比较时,新节点直接把老节点整个替换了

在 patch 之后,会返回 vnode,此时 vnode 得 el 属性已经绑定上了真实 dom 了,而在 patch 之前其值为 null。

现在具体分析在新旧节点值得比较时候的执行 patchVnode 内的逻辑:

function patchVnode(oldVnode, vnode) {
  // 让 vnode.el 引用到现在的真实 dom,两者同步更新
  const el = (vnode.el = oldVnode.el)
  let i,
    oldCh = oldVnode.children,
    ch = vnode.children
  // 1. 相同引用认为没变化
  if (oldVnode === vnode) return
  // 2. 比较文本节点,如果不相等则设置新的文本节点
  if (
    oldVnode.text !== null &&
    vnode.text !== null &&
    oldVnode.text !== vnode.text
  ) {
    api.setTextContent(el, vnode.text)
  } else {
    updateEle(el, vnode, oldVnode)
    if (oldCh && ch && oldCh !== ch) {
      // 3. 更新子节点
      updateChildren(el, oldCh, ch)
    } else if (ch) {
      // 4. 只有新节点有子节点
      createEle(vnode)
    } else if (oldCh) {
      // 5. 只有旧节点有子节点
      api.removeChildren(el)
    }
  }
}

节点的比较有 5 种情况:

  1. if (oldVnode === vnode),他们的引用一致,可以认为没有变化。

  2. if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text),文本节点的比较,需要修改,则会调用 Node.textContent = vnode.text。

  3. if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点,而且它们不一样,这样会调用 updateChildren 函数比较子节点。

  4. else if (ch),只有新的节点有子节点,调用 createEle(vnode),vnode.el 已经引用了老的 dom 节点,createEle 函数会在老 dom 节点上添加子节点。

  5. else if (oldCh),新节点没有子节点,老节点有子节点,直接删除老节点。

key 的作用

这里终于点题了,React/Vue 中 key 的作用是什么呢?根据上面关于 diff 算法描述可以解释,设置 key 和不设置 key 的区别:不设 key,newCh 和 oldCh 只会进行头尾两端的相互比较,设 key 后,除了头尾两端的比较外,还会从用 key 生成的对象 oldKeyToIdx 中查找匹配的节点,所以为节点设置 key 可以更高效的利用 dom。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

上一页05 Fetch data with React Hooks下一页07 useCallback 的正确使用方式

最后更新于1年前

这有帮助吗?

diff 的过程就是调用 patch 函数,就像打补丁一样修改真实 dom。我们可以查看 ,精简如下:

在 中判断是否同一个节点会比较节点的 key、tag 等值,对于 input 标签还会比较 type 等属性,这里不做详细分析。

上面第 3 步进行子节点比较 updateChildren 采用的是 头尾交叉对比,大致就是 oldCh 和 newCh 各有两个头尾的变量 StartIdx 和 EndIdx,它们的 2 个变量相互比较,一共有 4 种比较方式。如果 4 种比较都没匹配,如果设置了 key,就会用 key 进行比较,在比较的过程中,变量会往中间靠,一旦 StartIdx>EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了,就会结束比较。交叉对比源码参考 。

参考文章:

vue/patch.js
Vue/patch.js#sameVnode
Vue/patch.js
解析 vue2.0 的 diff 算法
写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?
DOM_树的比较
头尾交叉比较