为什么在使用片段时可以避免使用键，但在使用数组时不能

Why can I avoid using keys when using fragments but not when using arrays?

本文关键字：数组 不能 片段 为什么 可以避免      更新时间：2023-09-26

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

基本上，这没有任何警告：

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

（即使某些孩子可以重新订购。

但这引发了臭名昭著的Each child in an array or iterator should have a unique "key" prop.：

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

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

隐式键是元素相对于其同级元素的显示顺序。 即 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 会生成此警告，因为它知道隐式数组键有多不可靠。它要求您提供一些优化帮助。您的第一个代码段也是不可靠的隐式键的示例。但这更像是一种边缘情况。

我找到了一个解决方案：只需使用React.children.map来过滤子级。

喜欢这个：

  var children = React.Children.map(this.props.children, child => {
    return child.props.to_be_filtered ? null : child;
  });

然后直接<div>{children}</div>。

您还可以通过以下方式转换它们：

  var children = React.Children.map(this.props.children, child => {
    return <li>child</li>;
  });

没有任何缺少密钥:D的警告（使您的 API 更简单）

相关文章：