javascript - React 为什么卸载组件慢

Question

我有一个包装了一堆 ReactList 组件的组件。ReactList 组件是一个可以无限滚动的组件，即仅加载视口(viewport)上的内容。它有两种模式:简单模式和统一模式。我使用的是简单的，它只是在向下滚动时加载和加载(使可滚动页面更长)。统一加载并删除上面现在不在视口(viewport)中的部分。我尝试使用统一模式，如果它有效，我什至不需要问我要做什么，但它是 super 错误并且违背了目的。另一方面，简单的是超快滚动和加载同样快。

我将列表分成几个组，用户可以单击这些组，它将加载 ReactList 组件。如果可滚动页面很短，即用户没有一直向下滚动，则在列表组之间进行更改就足够快了。 〜2秒。但是，如果页面一直向下滚动，则尝试更改列表大约需要 6 秒。

我注意到页面也已完全加载，即没有更多内容需要加载。那么好吧，我想也许如果我更改包装器父组件的 key 并重新安装该组件，它应该会很快，对吧？没有。重新加载的组件很短，只有一个视口(viewport)长度，但大约需要 5 秒。

我注意到将完全加载的列表组件页面更改为常规单行文本“Hello world”组件仍然需要大约相同的数量! 〜5秒。这是怎么回事？

问题:为什么卸载列表中包含许多小组件的长页面需要很长时间才能卸载？

抱歉，我意识到这篇文章又长又充满文字，但我想我应该解释一下我的情况。

Answer 1

由于这是一个老问题，我真的想结束它。

快速回答:使用虚拟列表，类似于您描述的统一模式，但使用更好的 API 可以更好地维护。如果你搜索react virtual list，你可以得到一堆包，使用那些星星更多、维护得更好的包，而且最重要的是适合你的情况。

当你滚动时，你肯定会看到很多小组件。在 React 中，删除节点并不是一次性的事情，它需要从树上卸载每个叶子，并递归地卸载叶子直到到达该节点。因此，如果您有很多组件，即使今天的新 React 也无法帮助您。

使用虚拟列表，您可以获得更少的组件，尽管您的用户不知道，因此速度会很快。