大型列表中React子项上重复键的性能影响

Question

React Documentation on Reconciliation说

  

当孩子有钥匙时，React   使用键将原始树中的子项与子项匹配   随后的树。

据我所知，每个列表项都有唯一键，当列表项不变时，不需要更新DOM。

然而，如果你有一个包含唯一键的1000个元素的大型列表会发生什么，但是3个元素有重复键？ 具有唯一键的所有其他列表项是否可以再次重新呈现？ 或者用相同的键render做几个项目的差异算法没用？

Answer 1

React会认为具有相同键的项是完全相同的项，当它尝试计算DOM的更改时，只会渲染3个项中的1个。快速代码扫描显示它将尝试乐观并完全呈现其他项目。