当前位置: 首页 > 科技观察

开发者需要明白索引作为键是一种反模式

时间:2023-03-17 00:11:59 科技观察

我已经看到开发者多次渲染列表以列表项的索引作为键。{todos.map((todo,index)=>>)}这看起来很优雅并且解决了警告(这是“真正的”问题,对吧??)问题,这样做有什么危险?它可能会破坏您的应用程序并显示错误的数据!让我解释一下,key是React唯一用来确定DOM元素的东西,如果你想向列表中添加一个项目或者删除中间的一个项目会发生什么?如果key与上一个相同,React会认为这个DOM元素与上一个对应的组件相同,但它们不一定相同。为了演示潜在的危险,我创建了一个简单的示例,表明如果没有指定键,React将使用索引,因为这是当时最好的猜测,并且它会警告你这不是最佳解决方案(它通过使混淆的短语表达这个意思)。如果你主动提供它,React会假设你知道你在做什么。记住这个例子,它会产生不可预知的结果。看起来这应该具有永久的唯一属性。最适合在创建列表项时设置为key。显然我说的是id。我们可以这样使用:{todos.map((todo)=>)}另一种实现方式是将数字增量移到抽象方法中,使用全局索引来确保任意两个列表项具有不同的id。todoCounter=1;functioncreateNewTodo(text){return{completed:false,id:todoCounter++,text}}更好生产级别的解决方案将是处理列表项分散创建的更健壮的方法。因此,我推荐使用shortid。它可以快速生成“shortunorderedurlfriendlyandunique”id,代码如下:varshortid=require('shortid');functioncreateNewTodo(text){return{completed:false,id:shortid.generate(),text}}TL;DR:为每个列表项生成一个唯一的id,并在呈现列表时将其用作键。