React为什么要卸载组件慢

时间:2016-07-07 16:45:30

标签: javascript reactjs

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

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

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

我注意到将完全加载的列表组件页面更改为常规单行文本" Hello world"组件仍然采取相同的数量! 〜5秒。那是什么?

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

很抱歉,我意识到这篇文章篇幅很长,但我觉得我应该解释一下我的情况。

1 个答案:

答案 0 :(得分:1)

这是一个古老的问题,我真的想结束它。

快速答案:使用虚拟列表,类似于您所描述的uniform mode,但使用更好的api可以更好地维护。如果您搜索react virtual list,使用星号较多且维护得更好的软件包,则可以得到一堆软件包。

当滚动时,当然会有很多小组件。在反应中,删除节点并不是一件容易的事,它需要从树上卸下每个叶子,然后递归地卸下叶子,直到到达该节点为止。因此,如果您有很多组件,那么即使是今天的新反应也无法帮助您。

使用虚拟列表,尽管用户不知道,但您获得的组件更少,所以很快。