为啥我的 React 组件列表在使用 Index 作为 key prop 时不会弄乱？

Posted 2023-02-23

【中文标题】为啥我的 React 组件列表在使用 Index 作为 key prop 时不会弄乱？

【英文标题】：Why doesn't my React components list get messed up when using Index as a key prop?为什么我的 React 组件列表在使用 Index 作为 key prop 时不会弄乱？

【发布时间】：2021-05-07 09:36:23

【问题描述】：

我在网上查到了一些资料，就是说在使用地图的时候不应该使用index参数作为key属性。例如：

myPersonsState.map( (person, index) => 
    return <Person key=index />
)

根据我的发现，这不好。

这样做的原因是，每当您在状态（例如，删除数组中的第三个元素）中操作数据时，每个元素的键，从第 3 个位置开始，肯定会发生变化，因为每个元素的键都是它的索引（肯定会发生变化），因此，React 会将新元素的键视为旧键（在更改之前） .

按照这个逻辑，唯一合乎逻辑的想法是 React 将从第三个位置开始获取新元素，并给它们旧键，这会将它们视为旧键 - 这将导致 React 认为它没有不需要创建它们的新实例，只需使用以前的元素数据来创建它们。

那么，为什么我在实际操作状态和重新渲染时看不到呢？

为什么 React 知道它自己是一个新元素，即使它有另一个元素的先前键？

【参考方案1】：

React 的 key prop 使您能够控制组件实例。每次 React 渲染你的组件时，它都会调用你的函数来检索它用来更新 DOM 的新 React 元素。如果您返回相同的元素类型，它会保留这些组件/DOM 节点，即使所有 * 道具都已更改。

Key prop 允许你返回完全相同的元素类型，但强制 React 卸载前一个实例，并安装一个新实例。这意味着当时已存在于组件中的所有状态都将被完全删除，并且该组件已“重新初始化”以用于所有意图和目的。对于组件，这意味着 React 将对效果（或 componentWillUnmount）运行清理，然后它将运行状态初始化程序（或构造函数）和效果回调（或 componentDidMount）。

【讨论】：

所以按照这个逻辑，这意味着我可以使用索引作为关键道具，它会很好，没有问题。对吗？

使用索引作为键可能会出现问题，但请注意我是说我们会遇到问题，但并非总是如此。如果我们不从列表中添加/删除项目，那么可以使用索引作为键，否则使用一些唯一标识项目的 id 会很好。原因是如果您从列表中添加或删除某些项目，旧项目的索引会更改，并且反应可能会混淆哪些项目已更改。但是如果你使用状态值作为一个列表，如果状态改变了，它就会重新初始化，这没有问题。