如何在滚动时懒加载反应组件（VirtualInfinite scrolling）？

Question

通常在大流量的应用中，比如电子商务，需要保证页面的加载大小和TTI，在这种情况下，当用户访问页面时，我们只需要在视口中加载所有的组件。在这种情况下，当用户访问页面时，我们只需要在视口中加载所有的组件，如果在页面加载时渲染所有的组件，会导致TTIPerformance问题。如何在react中实现这个功能，而不需要太多的逻辑、配置或监听器？

Answer 1

要实现这个目标，我们有多种选择

1. 听卷 - 在这个方法中，我们在实施的时候有很多挑战。

   • 难以维护。
   • 需要在组件卸载前删除监听器。
   • 多个监听器会导致性能问题。

2. 🎁💥🔥react-observer-api 🎁💥🔥- 简单和零配置.

   • 易于实施
   • 易于维护
   • 钩子支持--通过使用 "钩子 "对渲染组件进行完全控制。useVisibilityHook
   • 支持Wrapper Class方式。
   • 功能包括 forceCheck,forceVisible

看看吧 💥💥💥