我目前正在开发一个React应用程序，它具有无限滚动列表。此列表显示从服务器获取的数据，该服务器包含大量项目（约我在服务器端使用分页一次获取并显示10项数据。
为了缓解在状态中存储大量项目所带来的性能问题，我考虑在用户滚动到某个点并加载了足够多的新页面后，从状态中删除较旧的项目（即以前页面中的项目）。
我担心这会如何影响用户体验。如果用户向上滚动，他们将看到一个加载微调器，而我重新获取和显示前一页的项目。这违背了无限滚动的原则，无限滚动的期望是平滑地滚动所有项目，而不会在列表中间看到加载微调器。
我的问题是
1.出于性能考虑，从无限滚动列表中删除旧项是否是一个好主意？
1.是否有更好的方法来处理这种情况，以保持流畅的用户体验，并减轻由于大型状态而导致的潜在性能问题？
1.大型科技公司（例如Facebook、Instagram）如何在无限滚动列表中处理类似的情况？
1条答案
按热度按时间e0uiprwp1#
很棒的问题！让我们深入每一个：
1.是的，从状态中删除较旧的项目可能是个好主意。对于大型数据集，随着不断向状态中添加越来越多的项，性能可能会成为一个问题。这可能会导致速度变慢，特别是在内存较少的设备上。但是，正如您所指出的，如果用户向上滚动并必须等待数据重新加载，这可能会影响用户体验。
1.您可以考虑实现“窗口化”或“虚拟化”技术。像
react-window或react-virtualized这样的库可以帮助解决这个问题。它们以一种方式呈现一个大的项目列表，即在任何给定时间实际上只呈现项目的子集（当前在视图中的那些），从而减少内存使用并提高性能。这样，用户可以平滑地滚动列表，而不会出现任何性能问题。1.大型科技公司通常使用上述策略的组合。它们通常采用虚拟化来高效地呈现列表。它们还实现了复杂的缓存策略来临时存储以前获取的数据，这使它们能够在用户向上滚动时快速显示旧项目，而无需再次从服务器获取数据。
重要的是要记住，最佳解决方案可能取决于您的应用程序的具体情况，例如列表中项目的平均大小、用户通常如何与您的应用程序交互以及他们使用的设备上可用的资源。测试不同的策略并监控它们对性能和用户体验的影响可以帮助您找到最适合您的案例的方法。