React中的key属性是否仅在渲染数组元素时有必要使用？

核心结论 #

key属性并不是仅在动态生成组件数组时才有使用价值，但静态固定的同级节点通常不需要额外配置key。

各场景问题解答 #

示例2：固定数量同类型静态同级元素 #

function fixedList() {
  return (
    <div>
      <div>first item on a list</div>
      <div>second one</div>
    </div>
  )
}

如果这些同级节点的数量、顺序永远不会发生变更，加不加key没有任何差异：React默认会按节点位置匹配diff，同位置同类型节点直接复用，不会产生额外性能开销，哪怕同级元素数量很多也一样。
只有当后续需要调整节点顺序、增删同类型节点时，配置key才能让React精准匹配对应节点，避免按位置diff带来的不必要节点销毁重建，降低渲染开销。

示例3：不同类型的静态同级元素 #

function fixedListWhoDoesSecs() {
  return (
    <div>
      <div>first item on a list</div>
      <section>second one but the type is different</section>
    </div>
  )
}

节点类型不同的静态场景下，固定顺序时加key也不会产生区别：React无key时按位置匹配，发现同位置节点类型和上一次渲染一致就会直接复用，和有key的匹配逻辑表现一致。
但如果后续需要调整节点顺序，配置key的收益会比同类型场景更明显：无key时同位置节点类型变化会直接触发旧节点销毁、新节点创建，两次DOM操作；有key时React会直接移动两个现有节点，仅产生一次移动开销，性能差距会被放大。

示例4：Fragment（<></>）作为父容器的场景 #

function someComps() {
  return (
    <>
      <div>first item on a list</div>
      <div>second one</div>
      <LeCustomTomato />
      <ChefsNoubleGoal stuff={yez} />
    </>
  )
}

空标签是React.Fragment的语法糖，除了不会生成真实DOM节点之外，对key的使用规则没有任何影响，和普通DOM元素作为父容器的逻辑完全一致。
注意：如果是动态渲染Fragment数组，需要用完整的<React.Fragment key={xxx}>写法配置key，简写的<></>不支持传递key属性。

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