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

最新推荐文章于 2022-10-14 20:55:55 发布
最新推荐文章于 2022-10-14 20:55:55 发布
阅读量211 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdxgg1102225556/article/details/114941835
版权

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

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

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

1102225556
关注
React和vue中key值的作用？
小黄呀呀呀的博客
11-27 239
1、虚拟DOM中key的作用： key时虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生产【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异进行比较，比较规则如下： 2、对比规则： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key值： 1）若虚拟DOM中内容没变，直接使用之前的真实DOM 2）若虚拟DOM中内容遍历，则生成新的真实DOM，随后替换掉页面中之前的真实DOM （2）旧虚拟DOM中未找到与虚拟DOM相同的ke
react中key的正确使用方式
学习、分享
11-27 5704
在开发react程序时我们经常会遇到这样的警告，然后就会想到：哦！循环子组件忘记加key了～ 出于方便，有时候会不假思索的使用循环的索引作为key，但是这样真的好吗？什么样的值才是key的最佳选择？ 为了弄明白，本文将从三个方面来分析"key"： 1.为什么要使用key 2.使用index做key存在的问题 3.正确的选择key 1.为什么要使用key react官方文档是这样描述key的： ...
react中使用index作为key值会怎样?
WebView
01-25 1433
** 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中的key与index
问白的博客
03-13 6794
React中的key与index 描述 在react 开发过程中，遇到循环渲染一个列表组件的时候，往往会给渲染的子组件添加一个key属性，来提高性能，这里涉及两个问题， 第一个是为什么添加key属性。 第二个是怎么添加key属性。 之所以添加key属性，究其根本是因为react 中的 diff算法。而在业务开发过程中特别是使用map, forEach 等遍历函数的时候往往随手就将index做为...
在React中index作为key是反模式的
weixin_33690367的博客
05-05 534
很多时候，一些开发者在呈现列表的时候喜欢用index（索引）作为其关键字（key） 我们都知道在React中，在渲染相邻同级元素(siblings)时需要给每一个item指定相应的key作为唯一标识符，如一组li,为了方便在页面发生变化是，即render树进行diff时，没有发生变化的element就不做更改。 但是在使用key的时候，很多人都习惯用列表的索引作为关键字，看起来很优雅，简洁。可不曾...
react学习历程14——理解list中key为啥不能使用index
qq_41470573的博客
06-25 305
在使用react写list组件的时候，必然需要写key，不写react直接报错，而之前我们一直使用的index做key，但react明确说了，不能使用index做key 先举一个例子说明一下 class DiffDemo extends React.Component { state = { students: [ {id: 1, name: "哆啦A梦", age: 3}, {id: 88, name: "静香", age:
React/Vue中的key有什么作用？为什么遍历列表时，key最好不要用index?
鸭绒的博客
01-18 1752
前端开发中，只要涉及到列表渲染，那么无论是Angular、React还是Vue框架，都会提示或要求每个列表项使用唯一的key，那很多开发者就会直接使用一个唯一的id或数组的index作为key的值，而并不知道使用key的原理。那么这篇博客就会讲解key的作用以及为什么最好不要使用index作为key的属性值。 文章目录1.key的作用1.1举例说明2.key最好不要使用数组的index2.1 举例说明 1.key的作用 key之所以那么重要，是因为React/Vue框架使用了虚拟DOM和Diff算法高效.
vue中使用v-for时为什么不能用index作为key
11-21
然而，使用索引（index）作为`key`值在某些情况下可能会导致性能问题和状态bug。 **为什么要使用key？** 虚拟DOM是Vue和React等框架提高性能的关键机制。它允许开发者在内存中维护一个轻量级的DOM表示，而不是直接...
reactvue用index作为key可能会引发的问题
一直在水些技术小文
05-15 580
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作， 仅用于渲染列表用于展示，使用index作为key是没有问题的。 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 如果确定只是简单的展示数据，用index也是可以的。 ...
【react】key值使用 index和id的区别
m0_52743009的博客
10-12 876
react中key值使用 index和id的区别
react中key值的作用、为什么不建议用index索引作为key值
weixin_46116626的博客
10-14 1263
react中key值的作用、为什么不建议用index索引作为key值
react +antd form动态添加时,删除元素没有及时渲染问题解决
qq_38883889的博客
09-17 906
react +antd form动态添加时,删除元素没有及时渲染问题解决
一篇文章告诉你React里为什么不能用index作为key
weixin_33836223的博客
12-14 3457
文章首发于github博客 之前在写react的时候，当我们做map循环的时候,当我们没有一个唯一id来标识每一项item的时候，我们可能会选择使用index data.map((item, index) => { return <li key={index}>{item}</li> }) 复制代码但是其实当你使用index来作为唯一key的时候，其实是...
react为什么不能用Index作为key
qq_26889291的博客
08-30 1214
https://blog.csdn.net/qq_34149805/article/details/84559343 总结当数组顺序发生变化是但元素内容未变化，index的key会重新渲染，id的key只会元素移动位置不会重新渲染，另一个场景当有map输出input(非受控组件)，再input输入值，当数组头部加一个元素，会发现界面不是我们想要输出。 ...
React 等框架使用 index 做 key 的问题
dbghum0371的博客
10-20 239
React 等框架使用 index 做 key 的问题 假如有两个树，一个是之前，一个是更变之后，我们抽象成两种可能性。 插入内容在最后 插入内容在最前 关于插在中间，原理一样，就不阐述。 使用 ul 代表树，并且使用了 index 做 key： <ul> <li key="{0}">00000</li> <li key="{...
ReactJS修炼之路（二）：组件的key
热门推荐
沉淀
01-14 1万+
一，概要在同系列的上一篇博客React修炼之路（一）里，我第一次接触组件key这个概念,因为不理解key的用处及不清楚React组件的更新机制而遇到父级组件调用了render函数而render内的子组件内容不更新的问题。在React修炼之路（一）里我在子组件里使用了componentWillReceiveProps方法，实现了内容更新，具体内容参见上一篇博客。最近又看了一些资料，同时实践得更多，对这
react循环的值为什么要有key_react列表渲染时为什么尽量不要把索引设置为key值...
weixin_33480732的博客
01-13 427
在react中，如果要渲染一个列表，我们会用map()函数将数组循环处理然后渲染到DOM，在处理循环时，“key” 是一个你需要包含的特殊字符串属性。很多时候，我们会使用当前列表的索引为key,但这样做真的好吗？要讨论这个问题，我们要从react的原理说起，我们react的执行步骤一般是：用state和jsx模板生成虚拟DOM，然后用虚拟DOM生成真实的 DOM，当我们state发生变化时,ren...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值