我有一个包含相当大列表的 React 项目。它已经到了对性能产生不利影响的地步,我决定使用react-window虚拟化它们。转换很简单,但我遇到了一个问题,即对列表项的任何更改(列表大小、项属性更改、任何内容……)总是会导致所有列表项重新安装(而不仅仅是重新渲染)。
由于应用程序很大,我没有时间将其分解为可重现的案例,但我做了以下观察:
- 所有列表项都有一个
key
,这是通过 React 开发者工具验证的。 - 当列表中的项目发生变化时,所有项目都
keys
保持不变。 - 当使用普通
map
渲染列表项时,它们不会在任何更改时重新安装。 - 当
react-window
与完全相同的列表项一起使用时,它们都会在任何更改时重新安装。 - 父 List 组件不会在更改时重新安装(仅重新渲染)。
这使我相信是 react-window 导致了重新安装,但是在线的所有示例都没有表现出这种行为。在似乎确实如此的报告问题中,通常得出的结论是开发人员没有key
为他们的项目提供一个,或者使用key
不正确。
当提出这样的问题时,人们通常倾向于回答他们需要停止使用匿名函数作为他们的项目、使用 React.memo、实现 componentDidUpdate 等的答案......但这不是我的问题米处理。我可以控制组件重新渲染。事实是这些物品都在重新安装,即使它们都有钥匙并且钥匙没有改变。
由于我没有要提供的代码片段,我的主要问题是:什么情况下可能会导致 React 重新挂载始终保留相同键的列表项?