index作为key是反模式
原文:Index as a key is an anti-pattern
我曾多次看到开发者在渲染列表的时候把列表项的index作为它的key。
{todos.map((todo, index) =><Todo {...todo}key={index} />
)}
这看起来很优雅,而且能够解决警告(这才是“真”问题,对吧?)的问题,这样做有什么危险呢?
It may break your application and display wrong data!
让我来解释,key是React唯一用来确定DOM元素的东西,如果你想列表增加一项或移除中间的某项,会发生什么事?如果key和之前一个一样React就会假定这个DOM元素和之前对应的组件是一个,但是它们可能并不是同一个了。
为了证明潜在的危险我创建了一个简单示例
这表明,如果不指定key的时候React会使用index,因为这是那个时候最好的猜测,而且它会警告你说这不是最优解(它通过令人困惑的语句表述这个意思)。如果你主动提供了它,React就认为你知道你在干什么。记住这个示例,它能产生不可预测的结果。
比较好
像这样的应该都有一个永久的唯一的属性,当列表项创建的时候它是最合适被设置为key的,显然我是在说id,我们可以用下面的方式使用它:
{todos.map((todo) =><Todo {...todo}key={todo.id} />
)}
另外的实现方式是把编号递增移动到抽象方法中,使用一个全局的index来确保任何两个列表项的id不同。
todoCounter = 1;
function createNewTodo(text) {return {completed: false,id: todoCounter++,text}
}
更好
一个产品级别的方案应该是一个更健壮的方法,能够处理分散创建列表项。因此,我推荐使用shortid。它能够快速生成“短 无序 url友好 唯一”的id,代码像下面这样:
var shortid = require('shortid');
function createNewTodo(text) {return {completed: false,id: shortid.generate(),text}
}
TL;DR:为每个列表项生成一个唯一的id,并在渲染列表的时候使用它作为key。
参考和相关文章
Dynamic Children and Keyed Fragments in React Docs
Explanation from Paul O’Shannessy
The importance of component keys in React.js
React.js and Dynamic Children — Why the Keys are Important
index作为key是反模式相关推荐
- [译] How to NOT React:React 中常见的反模式与陷阱
原文地址:How to NOT React: Common Anti-Patterns and Gotchas in React 原文作者:NeONBRAND 译文出自:掘金翻译计划 本文永久链接:g ...
- optional java_使用Java时查看Optional数据类型和一些反模式
optional java by Mervyn McCreight 默文·麦克莱特(Mervyn McCreight) 使用Java时查看Optional数据类型和一些反模式 (A look at t ...
- mysql 说说反模式设计_sql反模式分析1
第二章:乱穿马路 2.1 目标:存储多值属性 2.2 反模式:格式化的逗号分隔列表 模糊匹配无法使用索引,影响性能:多表关联麻烦,却极大影响性能:执行聚合查询不方便开发和调试:更新某个字段值必须执 ...
- Ajax 和 XML: 五种 Ajax 反模式
什么是反模式(anti-pattern)?反模式 就是频繁出现的应用程序设计缺陷,已经成为所有人都应该注意的问题.我在这里将从较高的层次进行讨论,而不涉及语法错误和链接问题. 大多数开发人员听说过关于 ...
- Ajax 和 XML: 五种 Ajax 反模式(转载)
通过理解错误的编码方式,可以更好地了解如何正确地进行编码.当然,编写 Asynchronous JavaScript™ + XML(Ajax)有正确的方法,也有错误的方法.本文将讨论一些需要避免的常见 ...
- 五种 Ajax 反模式:避免常见的 Ajax 代码陷阱!
developerWorks 中国 > XML | Web development > Ajax 和 XML: 五种 Ajax 反模式 避免常见的 Ajax 代码陷阱 文档选项 ...
- kubernetes 部署_用于Kubernetes部署的10种反模式
kubernetes 部署 As container adoption and usage continues to rise, Kubernetes (K8s) has become the lea ...
- [译] 十大 Docker 反模式
原文:https://codefresh.io/containers/docker-anti-patterns/ 容器已经遍地开花????.即便你尚未认定 Kubernetes 才是未来之选,单为 D ...
- 重构是提高可测试性的主要手段 《设计模式》《代码重构》《从重构到模式》 《反模式》 重构时机 编写测试时候 修改BUG时候
l重构是提高可测试性的主要手段 <设计模式><代码重构><从重构到模式> <反模式> 重构时机 编写测试时候 修改BUG时候
最新文章
- sgSpeedMode.js判断360浏览器是“兼容模式”,提示使用“极速模式”
- linux脚本发送udp,基于shell脚本实现UDP端口探测
- 解决eclipse显示jar源代码中文乱码问题
- php strrchar,php文件上传
- boost::math模块使用 agm 以高精度计算 lemniscate 常量
- 云转型缓慢并不甲骨文在中国区大裁员的唯一原因
- 时间数值缺失产生的字符串NaT处理
- 测试抑郁症软件,App Store 上的“抑郁症测试 - 心理测试”
- android 360游戏sdk,360dev 单机游戏接入SDK
- CSS网页切图经验与要点
- 顶级 Java 源码教程项目大汇总
- java获取本机外网ip
- 刷排名优优软件_刷网站排名软件
- 用Python修改Minecraft的mod
- 电报注册网络代理_如何在电报开放网络(TON)中开发和发布智能合约
- Efficient Heterogeneous Collaborative Filtering without Negative Sampling for Recommendation (2020)
- JAVA计算机毕业设计租房管理系统Mybatis+系统+数据库+调试部署
- HCIA—代理ARP (路由式代理ARP+vlan内代理ARP+vlan间代理ARP) [理论+实验验证]
- Zynga发售限量版FarmVille毛绒玩具
- 对华为畅玩手机5X进行升级