Reactjs 对于>；500个部件

我有一个多达2k个列表组件的列表，这些组件需要渲染（每个都是可扩展组件）并动态更改其中的数据。 就动态变化而言，没有缓慢的速度。更新的数据很快，只有那些具有新数据的组件才会重新渲染，因此显然没有不必要的重新渲染。但是页面的初始加载速度很慢，因为页面上有组件。大约需要3-4秒，然后它们全部出现

我已经尽可能多地介绍了文章，但它们都是关于不必要的重新渲染，这不是我的问题。我正在使用Redux来管理存储，这些数据决定了要创建和渲染多少组件

考虑到对这些组件中的数据进行的任何更改或更新都不会导致完全重新渲染，是否只是渲染很多项需要时间，而且它实际上运行得很好

我确实运行了一个测试，在每个事件发生时，我向所有进程和记录的控制台添加了时间戳——计算2k组件需要3毫秒，但在all显示之前需要3-4秒

更新 看起来这似乎不是react问题，而是浏览器问题，因为react没有更新dom（因此一直都在重新渲染所有内容），但dom正在与画布上500多个组件的更改进行斗争。

---

关于如何更好地处理如此多的对象以减缓浏览器/画布渲染的速度，您有什么想法吗？

您可能需要查看或。基本上，它的工作原理是，只在应用程序生命周期中的特定时间点加载屏幕上的内容，当发生滚动时，监视视口中的内容，并相应地对其进行操作。看看这两个包，看看哪一个更适合你。它们涵盖了几乎所有的常见用例：）

不是完美的解决方案，但它是一个解决方案。

---

事实证明，Material UI中的

ExpansionPanel

组件有一个未突出显示的内置属性，名为

TransitionProps

，可以像

TransitionProps={{unmountOnExit:true}}

那样设置。这意味着，在需要展开之前，不会计算展开部分中的复杂内容，并在关闭DOM时将其从DOM中移除。

谢谢！我会调查的。@Fonty很乐意帮忙！这扇窗户不太好用。首先，我不喜欢它用自己的滚动条创建自己的容器，但我可以接受。但是，由于组件本身是动态的，因此会产生奇怪的动画效果。当向下滚动列表时，我需要等待一段时间，然后这些组件才可以单击。我在顶部还有一个可折叠的图例，现在切换得非常好。理想的是一次卸载的渐进式装载机。i、 当你第一次进入页面时，它会加载5个，然后再加载5个，直到数据结束。也许最好添加更多细节？e、 g.您使用的是什么组件库？有任何异步任务吗？例如，这个例子看起来还行@alvinsj，这个例子只渲染便宜的组件。如果他的计算成本很高怎么办？可能是，也可能是复杂的DOM treeThanks@alvinsj，组件是material UI的ExpansionPanel。列表中的每个项目都需要自己的面板，该面板填充列表中的信息，但也需要附加交互式按钮。列表中的信息以1Hz异步更新，并连接到redux存储。目前，问题在于渲染了如此多的东西，计算时间很短，但渲染时间很长。我确实尝试了react window，但还是花了很长时间才全部加载。我将尝试上面的示例并报告。更新-它似乎链接到按钮。当我使用~500 ExpansionPanels时，即使使用来自列表的数据（从服务器获取的异步数据），也没有问题。在向面板添加按钮之前，不会出现任何问题。但是，如果所有500个面板都关闭了，那么按钮就会被有效隐藏而不显示，这又有什么关系呢？我最后还使用了react virtuoso——一个简单得多的工具，并将其与Redux端的计算相结合，始终提供要渲染的列表项。现在好多了。。。几乎是专业的，比如。。。我的天哪。我渲染了大约60个

Collapse

组件。如果没有

unmountenxit

，初始渲染大约需要1000毫秒。使用

unmountenxit

，初始渲染时间减少到300ms。惊讶-皮卡丘.jpgYeah。我尝试用基本的html按钮呈现数千行普通的、枯燥的“行”数据，但没有发现任何问题。添加“漂亮”折叠。。。仍然可以（尽管有点慢）。。。然后将按钮添加到折叠中。。。哇-真糟糕。我认为这是使用非常漂亮的组件和许多动画的问题——比如按钮在点击或悬停时的奇特交互。但我最终还是使用了react virtuoso，然后做了所有的背景工作，以确定要呈现的列表中哪些是/哪些不是。