React为什么要卸载组件慢

Question

我有一个包含一堆ReactList组件的组件.ReactList组件是一个执行无限滚动的组件,即只加载视口上的内容.它有几种模式:简单和统一.我正在使用简单的,只是在向下滚动时加载和加载(使可滚动页面更长).统一加载并删除现在超出视口的上述部分.我尝试使用统一模式,如果它有效,我甚至不需要问我将要做什么,但它是超级越野车并且失败了目的.简单的另一方面是超快速滚动和加载同样快.

我将我的列表分解为几个用户可以单击的组,它将加载该ReactList组件.如果可滚动页面很短,即用户没有完全滚动,则在列表组之间进行更改是足够快的.〜2秒.但是,如果页面一直向下滚动,并且尝试更改列表需要大约6秒.

我注意到页面也已完全加载,即无需加载.好吧,我想也许如果我更改了包装器父组件的密钥并只重新安装组件,它应该是快速的吗？不.重新加载的组件很短,只有一个视口长度,但需要大约5秒.

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

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

对不起,我意识到这篇文章很长很充满,但我想我应该解释一下我的情况.

Answer 1

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

快速回答：使用虚拟列表，就像uniform mode您所描述的那样，但使​​用更好的 api 可以更好地维护。如果你搜索，你可以得到一堆包react virtual list，使用那些星星更多、维护得更好的包，而且最重要的是适合你的情况。

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

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