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

Question

React Documentation on Reconciliation说

When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.

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

但是，当您有一个包含 1000 个具有唯一键的元素的大型列表，但有 3 个元素具有重复的键时，会发生什么情况？所有其他具有唯一键的列表项是否可以安全地再次重新渲染？或者具有相同 key 的少数项目是否会导致比较算法无用？

Answer 1

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