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

Question

我在网上找了一些资料，就是说在使用地图的时候不应该把index参数当成key道具。例如：

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

根据我的发现，这并不好。

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

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

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

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

标签： reactjsdomcomponentsrendering

Answer 1

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

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