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

Question

React 关于和解的文档说

当孩子有键时，React 使用键将原始树中的孩子与后续树中的孩子进行匹配。

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

但是，当您有一个包含 1000 个元素且具有唯一键的大型列表，但 3 个元素具有重复键时会发生什么？所有其他具有唯一键的列表项是否可以安全地再次重新呈现？或者，具有相同密钥的少数项目是否render对差异算法无用？

Answer 1

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