为何循环渲染React片段<>时需设置唯一key属性？

React的key机制是服务于虚拟DOM的Diff算法，和元素最终是否渲染到真实DOM完全没关系。

• 当你用map循环生成列表时，每个循环返回的内容都是React虚拟DOM树里的一个独立子节点。哪怕你返回的是片段，它也是这个列表项的顶层虚拟节点，React会把它当作列表中的一个独立项来追踪。
• 片段虽然不会被渲染到真实DOM，但它在虚拟DOM中是真实存在的节点容器。如果不给它加key，React无法区分循环生成的各个片段，Diff时就可能出现错误的节点复用，导致UI更新异常。
• 你给片段内部的<span>加key，只是给片段的子元素做了标识，但循环生成的片段本身作为列表项的顶层节点，仍然没有唯一身份，所以警告不会消失。只有给片段本身加上key，才相当于给这个列表项的虚拟节点打上了唯一标识，React才能正确识别每个循环项的变化。

举个直观的例子：
错误写法（仍会警告）：

elementList.map((eachEl) => (
  <>
    <span key={eachEl.id}>{eachEl.content}</span>
  </>
))

正确写法（警告消除）：

elementList.map((eachEl) => (
  <React.Fragment key={eachEl.id}>
    <span>{eachEl.content}</span>
  </React.Fragment>
))

注意：片段的短语法<>...</>不支持添加key属性，必须使用完整的React.Fragment写法才能设置key。

总结一下：key是React用来识别虚拟DOM节点身份的标记，只要是列表循环中生成的独立虚拟节点（不管是否渲染到真实DOM），都需要唯一key来保证Diff算法的正确性。

内容的提问来源于stack exchange，提问作者GLHF