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

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 的目的是优化虚拟 DOM diff-ing。数组的问题在于它们是动态的。如果您有一个生成元素 [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 来过滤 children。

像这样：

  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 更简单）

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

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

javascript

reactjs

react-jsx