react中key值用index对么？这样用有问题么？

最新推荐文章于 2024-07-18 11:48:33 发布
最新推荐文章于 2024-07-18 11:48:33 发布
阅读量300 收藏
点赞数
文章标签： react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhang__fan/article/details/116144392
版权

react中key值用index对么？这样用有问题么？

在react中key值用index是对的，但是也有问题，
在进行删除的时候react里会进行一个虚拟Dom也
就是diff比较 虚拟Dom和真实的进行比较
从而渲染出变量中发生变换的节点带着身旁的固
定节点 这时就产生了问题 因为index不具有唯一性
所以渲染就会产生错误
用时间戳实现id功能不可以，因为浏览器引擎计算时间
非常快 甚至1毫秒就可以计算多次 这样的话就id冲突

所以综上 使用 id 更好 或者使用shortid插件当作id 也可以

It's ruined
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【react】key值使用 index和id的区别
m0_52743009的博客
10-12 819
react中key值使用 index和id的区别
React中的key与index
问白的博客
03-13 6661
React中的key与index 描述 在react 开发过程中，遇到循环渲染一个列表组件的时候，往往会给渲染的子组件添加一个key属性，来提高性能，这里涉及两个问题， 第一个是为什么添加key属性。 第二个是怎么添加key属性。 之所以添加key属性，究其根本是因为react 中的 diff算法。而在业务开发过程中特别是使用map, forEach 等遍历函数的时候往往随手就将index做为...
react/vue用index作为key可能会引发的问题
m0_59070120的博客
05-07 1046
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 ...
react中key值的作用、为什么不建议用index索引作为key值
weixin_46116626的博客
10-14 1162
react中key值的作用、为什么不建议用index索引作为key值
一篇文章告诉你React里为什么不能用index作为key
weixin_33836223的博客
12-14 3419
文章首发于github博客 之前在写react的时候，当我们做map循环的时候,当我们没有一个唯一id来标识每一项item的时候，我们可能会选择使用index data.map((item, index) => { return <li key={index}>{item}</li> }) 复制代码但是其实当你使用index来作为唯一key的时候，其实是...
react中使用index作为key值会怎样?
WebView
01-25 1399
** key ** 写动态子组件的时候，如果没有给动态子项添加 key prop，则会报一个警告： Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'App'. See https://fb.me/react-warning-keys for more information. 这个警告指的是，如果每一个子组件是一个数组或迭代器的话，那么必须有
react为什么不能用Index作为key
qq_26889291的博客
08-30 1172
https://blog.csdn.net/qq_34149805/article/details/84559343 总结当数组顺序发生变化是但元素内容未变化，index的key会重新渲染，id的key只会元素移动位置不会重新渲染，另一个场景当有map输出input(非受控组件)，再input输入值，当数组头部加一个元素，会发现界面不是我们想要输出。 ...
React 等框架使用 index 做 key 的问题
dbghum0371的博客
10-20 221
React 等框架使用 index 做 key 的问题 假如有两个树，一个是之前，一个是更变之后，我们抽象成两种可能性。 插入内容在最后 插入内容在最前 关于插在中间，原理一样，就不阐述。 使用 ul 代表树，并且使用了 index 做 key： <ul> <li key="{0}">00000</li> <li key="{...
React--key值详解
xiaowei的博客
04-30 4524
项目中遇到不少的坑，例如组件的key影响加载，或者警告数组遍历子元素要有一个唯一的key值等，今天汇总说一下：参考博客1、key的作用react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。那么react是怎么用key的呢？react的作者之一Paul O’Shannessy有提到：
react中key的正确使用方式
学习、分享
11-27 5640
在开发react程序时我们经常会遇到这样的警告，然后就会想到：哦！循环子组件忘记加key了～ 出于方便，有时候会不假思索的使用循环的索引作为key，但是这样真的好吗？什么样的值才是key的最佳选择？ 为了弄明白，本文将从三个方面来分析"key"： 1.为什么要使用key 2.使用index做key存在的问题 3.正确的选择key 1.为什么要使用key react官方文档是这样描述key的： ...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 773
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 419
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 333
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
weixin_44565776的博客
07-18 122
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 972
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 489
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
HOW - SVG 图标组件封装（Lucide React）
最新发布
weixin_58540586的博客
07-18 790
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 148
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 244
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值