Reaction中的延迟加载和列表虚拟化有什么不同？ [英] What is the difference between Lazy Loading and List Virtualization in React?

问题描述

最近，对于一个正在工作的项目，我最近为同时呈现的多个列表组件实现了延迟加载，这导致了性能问题。然而，今天我在Reaction Docs上发现了一个名为List Virtualization的东西。

我当前使用的包： https://www.npmjs.com/package/react-lazyload

官方文档推荐的列表虚拟化包之一：https://github.com/bvaughn/react-virtualized

如果有人能解释一下两者之间的区别，我将不胜感激。 谢谢

推荐答案

参加聚会有点晚，但我会在这里补充我个人收集的两点意见，这是大体不同的。

延迟加载的思想是进行异步调用，以便在新数据出现在视区中时获取新数据(从API端点、存储等)。这改善了用户体验，因为用户不需要一次等待加载所有数据，而只需要等待在视区中需要加载的数据。社交媒体平台Triller就是一个很好的例子，它懒洋洋地将内容加载到视窗中，在用户滚动时产生无限的提要。延迟加载仅关注获取后续数据并将其加载到视区中。

虚拟化与此类似，但只渲染视区中的内容。随着先前获取的数据离开视区，这些DOM节点也离开了视区。这改善了用户体验，因为滚动了很长时间的用户会有许多DOM节点，因此可能会注意到性能下降。社交媒体平台Instagram就是一个很好的例子，它的订阅源使用了虚拟化。当用户滚动时，只有少数帖子将保持在DOM中加载。

有关直观表示，请参阅下图：

---

这篇关于Reaction中的延迟加载和列表虚拟化有什么不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！