不映射数组时，我们是否需要为子项设置键?

>想象一下我们有这个JSX：

<App>
<Counter value={this.state.counter1} />
<Counter value={this.state.counter2} />
</App>

我们也有这个(想象一下this.state.counters是一个值数组(：

<App>
{ this.state.counters.map((value, i) => <Counter value={value} key={i} /> )}
</App>

为什么我们需要在第二个示例中为每个计数器设置一个键，而不是在第一个示例中设置一个键？渲染不是基本一样吗？

是的，结果是一样的。

在第一种情况下，React 已经知道组件的顺序，因为你已经在代码中定义了它。

在第二种情况下，组件的顺序完全取决于数组的定义方式。React 不能仅仅通过知道要迭代哪个数组来知道这一点。如果数组被更改(删除、添加或更改项目(，React 如何知道组件是否应该使用新的 props 更新或简单地更改它们的顺序？

请考虑以下示例：

const arr = [{id: 1, name: 'Chris'}, {id: 2, name: 'Emi'}];
<App>
{arr.map(x => <Component name={x.name} id={x.id} />)}
</App>

这将产生与以下内容相同的结果：

<App>
<Component id={1} name="Chris" />
<Component id={2} name="Emi" />
</App>

但是，如果我们将数组更改为：

const arr = [{id: 1, name: 'Emi'}, {id: 2, name: 'Chris'}];

我们是将克里斯改名为埃米，将惠美改名为克里斯，还是他们只是交换了位置？React 无法"自动"知道这一点。

出于这个原因，我们定义了一个keyprop 来告诉 React 你的数据是如何建模的。如果我们在这里将密钥定义为nameReact会将其解释为放置交换。如果id，React 会更新道具。

奖励情况：如果我们定义我们的密钥是id，并且我们更改了{id: 1, name: 'Chris'}以{id: 3, name: 'Chris'}相应的组件将被卸载并替换为新的组件(而不是道具更新！为什么？因为具有标识1的组件不再存在。

有关键的更多信息：了解 React 中数组子级的唯一键.js

您认为这两种方法中的哪一种在性能方面更好，将所有计数器值放在数组中还是为每个计数器值使用一个键？

我认为这里的任何性能差异都可以忽略不计。"正确"的方式更多地取决于偏好以及对程序员有意义的你。通常，为了可读性，如果要使用不同的 props 重复渲染相同的组件，请映射数组。此外，如果您有许多组件，将它们保存在数组中更有意义。

相关内容