避免在 React 中使用数组索引作为键

避免在 React 中使用数组索引作为键

Photo by 凯利·西克玛 on 不飞溅

在这个 第二脑 邮政 , 我将讨论：在 reactJS 中使用数组索引作为键值。

要在数组中呈现项目列表，我们将使用循环该数组 地图（） 方法，并且 react 需要每个列表的 key 属性，以帮助 react 将每个项目与同级项目区分开来，并识别已更改、更新或删除的项目。

通常情况下，react 开发人员使用项目的索引作为键值，它看起来很优雅并删除了警告，对吧？

Using index as a key

使用索引作为键很好，因为 谦虚的罗宾 建议：

在以下情况下，您可以使用索引作为键：

1. 列表和项目是静态的，它们不会被更改和计算。
2. 列表中的项目没有 ID。
3. 名单永远不会 订购 或者 过滤 .

但是，最佳实践仍然是使用列表/项目 ID 作为键。但是你可能仍然会问我为什么我们应该避免使用数组索引作为键，对吧？这就是原因。

它可能会破坏我们的反应应用程序并呈现错误的数据

现在我们知道为什么反应期望每个项目都有一个键，当项目列表被更新（添加或删除一个或多个项目）时，使用索引会破坏我们的应用程序是完全有意义的。

想象一下，您有一个项目列表，您将通过使用映射对其进行渲染 地图（） 方法，并且此项目列表将在将来更新。想象一下，如果我们在数组中间推送或删除一个项目。如果 key 和之前一样，react 会假设 DOM 元素代表的 item 列表和之前一样，这是错误的。

解决方案

解决方案 1：项目的 ID

第一个解决方案是使用项目的 ID。每个项目都应该有一个唯一且永久的属性，主要是一个 ID。

List of items with an ID property

在上面的例子中，定义了一个数学班学生的数组。每个学生都有一个特殊的、唯一的 ID。这对于区分一个学生和其他学生非常有用。我们可以使用该 ID 作为键值。

解决方案 2：唯一 ID 生成器

第二个解决方案也是我最喜欢的一个，是使用唯一的 ID 生成器。我使用了一个名为的 npm 包 NanoID .

为什么我使用 NanoID：

• 它速度快，而且比 UUID 更快
• 不可预测性（使用 加密货币 节点模块，而不仅仅是 数学随机（） )
• 均匀性。 NanoID 使用更好的算法并经过一致性测试。
• 有据可查
• 漏洞

Using NanoId to generate unique ID

现在我们为每个学生使用一个 ID 生成器，如果我们要寻找超级随机的唯一 ID，这是一个好主意。而且由于我们在定义数据时生成了一个唯一的 ID，所以在重新渲染 react 时我们仍然有相同的 ID。而且是安全的。

要了解有关 NanoID 的更多信息，您可以访问 GitHub 存储库 这里 .

今天就是这样！希望您对使用数组索引作为反应键属性的值有新的见解。

参考资料及相关文章：

https://reactjs.org/docs/lists-and-keys.html#keys

https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern

https://www.developerway.com/posts/react-key-attribute

https://www.geeksforgeeks.org/reactjs-keys

https://adhithiravi.medium.com/why-do-i-need-keys-in-react-lists-dbb522188bbb

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18498/46170608