react-in-viewport:检测React组件是否在视口中

在视口中React 使用来检测组件是否在视口中的库 npm install --save react-in-viewport yarn add react-in-viewport 例子 为什么 一个常见的用例是在组件位于视口中时加载图像（ ）。 传统上，我们需要监视滚动位置并计算视口大小，这可能是滚动性能的瓶颈。 现在，现代的浏览器提供了一个新的可以使这项工作更轻松，更高效。 保鲜膜 对于不支持API的浏览器，您需要加载 。 require ( 'intersection-observer' ) ; 设计 核心逻辑是使用React Hooks编写的。 我们提供了两个接口：您可以将handleViewport （一个高阶组件（HOC））用于基于类的组件，或者将钩子直接用于功能组件。 HOC充当包装器，并将相交观察器附加到目标组件。 然后，HOC将传递额外的道具，指示视口信息，并