文件名称：react-in-viewport:检测React组件是否在视口中
文件大小：218KB
文件格式：ZIP
更新时间：2024-05-18 03:17:41
react lazyload viewport intersection-observer JavaScript
在视口中React 使用来检测组件是否在视口中的库 npm install --save react-in-viewport yarn add react-in-viewport 例子 为什么 一个常见的用例是在组件位于视口中时加载图像（ ）。 传统上，我们需要监视滚动位置并计算视口大小，这可能是滚动性能的瓶颈。 现在，现代的浏览器提供了一个新的可以使这项工作更轻松，更高效。 保鲜膜 对于不支持API的浏览器，您需要加载 。 require ( 'intersection-observer' ) ; 设计 核心逻辑是使用React Hooks编写的。 我们提供了两个接口：您可以将handleViewport （一个高阶组件（HOC））用于基于类的组件，或者将钩子直接用于功能组件。 HOC充当包装器，并将相交观察器附加到目标组件。 然后，HOC将传递额外的道具，指示视口信息，并
【文件预览】：
react-in-viewport-main
----.eslintrc(1KB)
----.flowconfig(39B)
----yarn.lock(495KB)
----src()
--------stories()
--------lib()
--------__tests__()
--------setupTests.js(277B)
--------index.js(285B)
----.babelrc(1KB)
----.circleci()
--------config.yml(1KB)
----jest-config.js(167B)
----theme.js(3KB)
----.npmignore(239B)
----.storybook()
--------config.js(723B)
--------preview-head.html(195B)
--------addons.js(44B)
----CONTRIBUTING.md(416B)
----LICENSE(1KB)
----README.md(8KB)
----theme.css(7KB)
----.scripts()
--------mocha_runner.js(905B)
--------prepublish.sh(858B)
--------user()
--------publish_storybook.sh(1KB)
--------get_gh_pages_url.js(314B)
----.gitignore(45B)
----package.json(3KB)