面试题:react、vue中的key
1.虚拟DOM中key的作用
key是虚拟DOM对象的标识,当数据发生变化时,React/Vue会根据【新数据】生成新的【虚拟DOM】,随后React/Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
a.若虚拟DOM中的内容没变,直接使用之前的真实DOM
b.所虚拟DOM中的内容变了,则生成新的虚拟DOM,随后替换掉页面中之前的真实DOM
(2)旧虚拟DOM中没找到与新虚拟DOM相同的key:
创建新的真实DOM,随后渲染到页面
2.用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序的操作,则会产生没必要的真实DOM更新 ==> 界面效果没问题,但是效率低
(2)如果结构中还包含输入类的DOM则会产生错误的DOM更新 ==> 界面有问题
3.开发中如何选择key?
(1)最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值;
(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index作为key也没有问题。
面试题:react、vue中的key的更多相关文章
- react,vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中的key的作用: key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较. 2.比较规则 ...
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- React组件中的key
React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...
- vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
- React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)
网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...
- Vue中使用key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...
- Vue中的key到底有什么用?
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...
- Vue 中的 key 有什么作用?
key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确.更快速. Vue 的 diff 过程可以概括为:oldCh 和 newCh 各有两个头尾的变量 o ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- vue 中$index $key 已经移除了
https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...
随机推荐
- XML的定义以及XML的编写
什么是XML? 定义 1. XML 是 EXtensible Markup Language 这个单词的简写,中文意思就是:可扩展标记语言. a)可扩展:html 标签是预先定义好的,不能任意定义, ...
- c# 数组 集合 属性访问 设置
当只修改数组或者集合的某一个特定值时不会经过CLR属性封装器
- ls和mkdir
ls 查看当前目录的内容 1) ls -l 显示详细列表 2) Ls -lh 吧文件大小以人性化的方式展开 3) ls -a 显示所有的文件,包括隐藏文件,隐藏文件是已.开头的文件 4) ll 等于 ...
- 读取远程服务器linux指定目录下文本内容(工具类)
package com.aa.dataadmin.common.utils; import cn.hutool.extra.ssh.JschUtil; import com.jcraft.jsch.C ...
- linux网络编程中的errno处理
在Linux网络编程中,errno是一个非常重要的变量.它记录了最近发生的系统调用错误代码.在编写网络应用程序时,合理处理errno可以帮助我们更好地了解程序出现的问题并进行调试. 通常,在Linux ...
- Java8 lambda常用操作
参考博客:https://www.cnblogs.com/hmy-1365/p/12923435.html
- 【手搓模型】亲手实现 Vision Transformer
前言 博客主页:睡晚不猿序程 首发时间:2023.3.17,首发于博客园 最近更新时间:2023.3.17 本文由 睡晚不猿序程 原创 作者是蒻蒟本蒟,如果文章里有任何错误或者表述不清,请 tt 我, ...
- Kafka 物理存储机制
一个商业化消息队列的性能好坏,其文件存储机制设计是衡量一个消息队列服务技术水平和最关键指标之一.下面将从 Kafka文件存储机制和物理结构角度,分析 Kafka是如何实现高效文件存储,及实际应用效果. ...
- JMM知识点总结
JMM知识点总结 一.什么是JMM? 不知道大家在学习的过程有没有思考过这两个问题 为什么说java是跨平台语言 导致并发问题的原因是什么 第一个问题,我是这么理解的,代码运行本质上是将我们写的语言转 ...
- 【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 基于SpringBoot+uniapp简单通讯聊天软件 项目介绍 JavaDog Chat 简单通讯聊天软件是基于SpringBoot+MybatisPlus+ ...