为什么我可以避免在使用片段时使用键而不是在使用数组时使用键？

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>

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

但这会触发臭名昭着的Each child in an array or iterator should have a unique "key" prop.：

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

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

Answer 1

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

key的目的是优化Virtual DOM diffing。数组的问题在于它们是动态的。如果您有一个生成元素[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生成此警告，因为它知道隐式数组键的不可靠性。它要求你提供一些优化帮助。您的第一个代码段也是不可靠的隐式密钥的示例。但它更像是一个边缘案例。

Answer 2

我找到了一个解决方案：只需使用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更简单）