reactjs - 当不映射数组时，我们是否需要为子项设置键？

Question

假设我们有这个 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>

1. 为什么我们需要在第二个示例中为每个计数器设置一个键，而不是在第一个示例中？渲染不是基本一样吗？
2. 您认为这两种方法哪一种在性能方面更好，将所有计数器值放在一个数组中还是为每个计数器值使用一个键？

Answer 1

Why do we need to set a key in the second example for each Counter and not in the first example? Isn't it rendering basically the same?

是的，结果是一样的。

在第一种情况下，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'}];

我们是否将 Chris 重命名为 Emi，将 Emi 重命名为 Chris，还是只是交换了位置？ React 无法“自动”知道这一点。

出于这个原因，我们定义了一个 key 属性来告诉 React 你的数据是如何建模的。如果我们在这里将键定义为 name，React 会将其解释为放置交换。如果是 id，React 就会更新 props。

额外情况:如果我们将 key 定义为 id，并将 {id: 1, name: 'Chris'} 更改为 {id: 3, name: 'Chris'} 相应的组件将被卸载并替换为新组件(而不是 Prop 更新!)。为什么？因为具有身份1的组件不再存在。

有关 key 的更多信息:Understanding unique keys for array children in React.js

<小时/>

Which of both approaches do you think is better in terms of performance, having all counter values in an array or using a key for each one?

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