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

Question

React Documentation on Reconciliation 说

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

我了解每个列表项都有一个唯一的键，当列表项不更改时，不必更新 DOM。

然而，当你有一个包含 1000 个元素的大列表，但有 3 个元素有重复的键时会发生什么？ 所有其他具有唯一键的列表项是否可以安全地再次重新呈现？ 还是用相同的键render diffing 算法没用的几个项目？

Answer 1

React 会认为具有相同键的项目是完全相同的项目，并且当它尝试计算对 DOM 的更改时，只会渲染 3 个项目中的 1 个。快速的代码扫描表明它将尝试保持乐观并成功完成其他项目的渲染。