react反模式之index作为key

sevi_stuo 发布于2019-08-21 11:22 / 2096人阅读

摘要：反模式之作为原文我已经看到过很多开发人员在渲染一个列表时使用作为它的这样写看起来很优雅并且确实摆脱了的警告信息，那么这样写有危险的地方吗这样会破坏你的应用让其显示出错误的数据下面我来解释下，是来识别元素的唯一属性。

react反模式之index作为key

原文：Index as a key is an anti-pattern

我已经看到过很多React开发人员在渲染一个列表时使用index作为它的key

{todos.map((todo, index) => 
    
)}

这样写看起来很优雅并且确实摆脱了react的警告信息，那么这样写有危险的地方吗？

这样会破坏你的应用让其显示出错误的数据

下面我来解释下，key是React来识别DOM元素的唯一属性。如果你往数组里面增加一些元素或者从数组中间移除一些东西会发生些什么呢？如果key属性和以前一样React会认为DOM元素表示的组件和以前是一样的，但是那是错误的。

这里我有个简单的例子来演示这个潜在的危险源码

事实证明，React 会用index作为默认的key的值因为这个时候React认为用index是最合理的。因此，React会警告你那样做是为达标准的（这样说看起来有点困惑. 如果你自己提供了key属性React会认为你知道自己在做啥. 记住这个例子，它可能会导致错误。

Better

列表里面的每一项都应该又一个永久并且唯一的属性，理想情况下应该在创建列表的时候分配下去. 当然我指的是id. 我们可以像下面这样使用它:

{todos.map((todo) => 
    
)}

另外的实现方式是把编号递增添加到抽象方法中，使用一个全局的index来确保任何两个列表项的id不同。

todoCounter = 1;
function createNewTodo(text) {
    return {
        completed: false,
        id: todoCounter++,
        text
    }
}

Much better

一个产品化的解决方案是它应该更加健壮，能够用来创建分散的列表项. 因此我强烈推荐一个npm包shortid, 它可以快速的生成一系列‘短的无序的对url友好的唯一的’ id，下面是示例代码:

var shortid = require("shortid");

function createNewTodo(text) {
    return {
        completed: false,
        id: shortid.generate(),
        text
    }
}

TL;DR: 为每个列表项生成一个唯一的id，然后在渲染列表项时作为key属性传给列表项.

References and related articles

. Dynamic Childrenand 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

GPU云服务器云服务器 Java设计模式之（五）——代理模式 Indexing index. index

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86625.html

index作为key是反模式

摘要：原文我曾多次看到开发者在渲染列表的时候把列表项的作为它的。更好一个产品级别的方案应该是一个更健壮的方法，能够处理分散创建列表项。它能够快速生成短无序友好唯一的，代码像下面这样为每个列表项生成一个唯一的，并在渲染列表的时候使用它作为。原文：Index as a key is an anti-pattern 我曾多次看到开发者在渲染列表的时候把列表项的index作为它的key。 {tod...

hightopo 2019-08-22 11:01 评论0 收藏0
4、React组件之性能优化

摘要：组件的性能优化高德纳我们应该忘记忽略很小的性能优化，可以说的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外的代码。对多个组件的性能优化当一个组件被装载更新和卸载时，组件的一序列生命周期函数会被调用。 React组件的性能优化高德纳: 我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。...

陈伟 2019-08-22 15:01 评论0 收藏0
【译】你可能不需要派生状态

摘要：所有派生状态导致的问题无异于两种无条件的根据来更新无论和是否匹配来更新。派生状态最常见的错误就是将这两者混和在一起。因此通常被用于性能优化而不是来判断派生状态的正确性。我们可以使用派生状态来存储过滤列表这种方式避免了重新计算。原文链接：https://reactjs.org/blog/2018... 翻译这篇文章的起因是因为在一次需求迭代中错误的使用了getDerivedState...

dinfer 2019-08-23 13:39 评论0 收藏0
You Probably Dont Need Derived State

摘要：同时，我们意识到人们对于这两个钩子函数的使用有许多误解，也发现了一些造成这些晦涩的反模式。注意事项本文提及的所有反模式案例面向旧钩子函数和新钩子函数。因此，用这两个钩子函数来无条件消除是不安全的。原文链接：https://reactjs.org/blog/2018...React 16.4包含了一个getDerivedStateFromProps的 bug 修复：曾带来一些 Reac...

URLOS 2019-08-23 10:26 评论0 收藏0
React系列之 Redux 架构模式

摘要：原文地址没想到这篇文章这么晚才出，最近发生了太多的事情，已致于心态全无，最终也离开了现在的公司，没想到是这么的狼狈一个人的光芒可以放到很大也可以小到微乎其微，如果不能好好的规划最终也只能默默的承受世上没有相同的感同身受，感受真实才能真正的原文地址：https://gmiam.com/post/react-... 没想到这篇文章这么晚才出，最近发生了太多的事情，已致于心态全无，最终也离...

xfee 2019-08-20 12:06 评论0 收藏0