如何在滚动（虚拟/无限滚动）上延迟加载react组件？

Question

通常在电子商务这样的高流量应用中，需要确保页面加载大小和TTI。
场景，当用户访问页面时，我们只需要仅在视口中加载所有组件。如果我们在页面加载时呈现所有内容，则会导致TTI /性能问题。
如何在没有太多逻辑或配置或侦听器的情况下以反应的方式实现这一点？

Answer 1

要实现这一点，我们有多种选择

1. 收听滚动-在这种方法中，我们在实施过程中面临许多挑战。

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

2. ??? react-observer-api ???-简单和零配置。

   • 易于实施
   • 易于维护
   • 支持挂钩-使用useVisibilityHook
   可以完全控制渲染组件
   • 支持包装器类方法。
   • forceCheck，forceVisible之类的功能

???有关实现的更多详细信息，请Check it out???