0

我有一个包含相当大列表的 React 项目。它已经到了对性能产生不利影响的地步,我决定使用react-window虚拟化它们。转换很简单,但我遇到了一个问题,即对列表项的任何更改(列表大小、项属性更改、任何内容……)总是会导致所有列表项重新安装(而不仅仅是重新渲染)。

由于应用程序很大,我没有时间将其分解为可重现的案例,但我做了以下观察:

  • 所有列表项都有一个key,这是通过 React 开发者工具验证的。
  • 当列表中的项目发生变化时,所有项目都keys保持不变。
  • 当使用普通map渲染列表项时,它们不会在任何更改时重新安装。
  • react-window与完全相同的列表项一起使用时,它们都会在任何更改时重新安装。
  • 父 List 组件不会更改时重新安装(仅重新渲染)。

这使我相信是 react-window 导致了重新安装,但是在线的所有示例都没有表现出这种行为。在似乎确实如此的报告问题中,通常得出的结论是开发人员没有key为他们的项目提供一个,或者使用key不正确。

当提出这样的问题时,人们通常倾向于回答他们需要停止使用匿名函数作为他们的项目、使用 React.memo、实现 componentDidUpdate 等的答案......但这不是我的问题米处理。我可以控制组件重新渲染。事实是这些物品都在重新安装,即使它们都有钥匙并且钥匙没有改变

由于我没有要提供的代码片段,我的主要问题是:什么情况下可能会导致 React 重新挂载始终保留相同键的列表项?

4

0 回答 0