javascript - React 如何区分具有相同父级的两个数组的相似键？

Question

在 Dan Abramov 的博文中，我阅读了

Note that the key is only relevant within a particular parent Reactelement, such as a form. React won’t try to “match up” elements withthe same keys between different parents.

这里是这样写的:

let data = [0, 1];
return (
  <div>
    <div>
      {data.map((x) => (
        <span key={x}>{x}</span>
      ))}
    </div>
    <div>
      {data.map((x) => (
        <span key={x}>{x}</span> // has different parent but same keys
      ))}{" "}
    </div>
  </div>
);

React 不会混淆 span 元素即使它们具有相同的键，因为它们属于不同的父元素。

但是 React 如何区分这种情况？

let data = [0, 1];

return (
  <div>
    <span key={0}>0</span>
    {data.map((x) => (
      <span key={x}>{x}</span>
    ))}
    {data.map((x) => (
      <span key={x}>{x}</span>
    ))}
  </div>
);

在这种情况下，协调会正常工作吗？怎么办？

因为上面的东西会翻译成类似这样的东西:

<div>
  <span key="0">0</span>
  <span key="0">0</span>
  <span key="1">1</span>
  <span key="0">0</span>
  <span key="1">1</span>
</div>

但是我没有收到上面代码的任何警告，所以 React 似乎仍然能够正确地进行协调。

Answer 1

我没有确凿的证据，但我不认为这个案例缺少警告。我宁愿 React 做类似 React.Children.toArray 的事情当遇到一群 child 时:

React.Children.toArray() changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, toArray prefixes each key in the returned array so that each element’s key is scoped to the input array containing it.

所以我的猜测是协调在这里起作用。

此外，我个人会在后期渲染阶段实现“重复键”检查，以便捕获所有边缘情况(包括您的示例)。没有警告，因此 IMO 是一个强有力的线索，表明没有重复的键。