reactjs - React 中的延迟加载和列表虚拟化有什么区别？

Question

最近在工作中的一个项目中，我最近为同时呈现的多个列表组件实现了延迟加载，这导致了性能问题。然而，今天我在 React Docs 上遇到了一个叫做 List Virtualization 的东西。
我目前使用的包:
https://www.npmjs.com/package/react-lazyload
官方文档中推荐的 List Virtualization 包之一:https://github.com/bvaughn/react-virtualized
如果有人可以解释两者之间的区别，我将不胜感激。
谢谢

Answer 1

参加聚会有点晚了，但我会在这里加上我个人收集的两分钱，这是大体上的差异。
延迟加载的想法是进行异步调用以获取出现在视口(viewport)中的新数据(从 API 端点、商店等)。这改善了用户体验，因为用户不需要等待所有数据一次加载，而只需要等待视口(viewport)中需要的数据。社交媒体平台Triller是一个很好的示例，该站点将内容延迟加载到视口(viewport)中以在用户滚动时生成无限提要。延迟加载只关心获取后续数据并将其加载到视口(viewport)中。
虚拟化是类似的，但仅呈现视口(viewport)中的内容。由于先前获取的数据离开视口(viewport)，因此那些 DOM 节点也会离开。这改善了用户体验，因为滚动很长时间的用户将拥有许多 DOM 节点，因此可能会注意到性能下降。社交媒体平台Instagram是将虚拟化用于其提要的站点的一个很好的例子。当用户滚动时，只有少数帖子会保持加载在 DOM 中。
请参阅下图以获取直观表示: