javascript - 为什么在使用片段时可以避免使用键，而在使用数组时却不能？

Question

我在这里做了一个例子:http://jsbin.com/divubozaha/edit?js,console,output

基本上，这没有警告:

<div>
  <h1>test1</h1>
  {Math.random() > 0.5 ? <h1>test1</h1> : null}
  <h1>test1</h1>
</div>

(即使某些子项可以重新排序。

但这会触发臭名昭著的数组或迭代器中的每个子元素都应该有一个唯一的“键”属性。:

<div>{[
  <h1>test2</h1>,
  <h1>test2</h1>,
  <h1>test2</h1>
]}</div>

因此，在过滤元素的子元素时，我收到了警告。也许片段中有某种隐式键？

Answer 1

隐式键是元素相对于其兄弟元素出现的顺序。即 0、1、2...您可以在 React 开发工具中看到这一点:它是 data-reactid 属性的最后一位数字。

key 的目的是优化虚拟 DOM 比较。数组的问题在于它们是动态的。如果您有一个生成元素 [A, B, C, D, E] 的数组，然后删除第一项，则您的新元素将变为 [B, C, D, E]。 React 然后将 B 与 A、C 与 B、D 与 C、E 与 D 进行比较，并更改每个节点。

相反，如果您提供一个键来唯一标识每个元素，React 将知道 A 已被删除，然后将比较 B 与 B、C 与 C、D 与 D 以及 E 与 E。这允许更高效的 DOM改变。

React 生成此警告是因为它知道隐式数组键是多么不可靠。它要求您提供一些优化帮助。您的第一个片段也是不可靠的隐式键的示例。但这更像是一种边缘情况。