React-常用库
React-常用库
WaterBoat5 个用于 React 项目的延迟加载库
1. react-lazyload
react-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一，支持装饰器和服务器端渲染。其特点如下：
- 具有一组属性，使用户能够自定义组件的功能。
- 提供诸如 forceCheck 之类的实用程序来显示隐藏的内容，这些内容在没有调整大小或滚动事件的情况下变得可见。
- 开箱即用支持水平延迟加载。
- 只为所有延迟加载的组件实现两个事件监听器，进一步优化性能。
GitHub：github.com/twobin/reac…
2. react-lazy-load
react-lazy-load 是一个 React 组件，可用于以可预测的方式延迟加载内容。它相对较快，具有最小的包大小（缩小为 6KB）。其特点如下：
自动检测滚动容器，例如带有滚动条的
，因此甚至可以在滚动容器内使用。
允许用户设置阈值以从视口的任何一侧开始内容加载，使用诸如 offsetVertical、offsetHorizontal、offsetTop、offsetBottom 等属性。
在 IE8+ 中工作。
具有对防抖功能的内置支持。
但是，与 react-lazyload 库相比，该组件的 props 数量非常有限，因此提供的灵活性较低。主要缺点是它不允许用户为延迟加载的组件应用占位符。
GitHub：github.com/loktar00/re…
3. react-lazy-load-image-component
react-lazy-load-image-component 是一个易于使用的库，用于延迟加载任何类型的组件。它支持 IntersectionObserver，可以确定元素何时离开和进入视口。其特点如下：
- 这个库最重要的特性是它的 HOC，trackWindowScroll，它允许组件跟踪窗口滚动位置，而无需为每个元素使用滚动或调整大小事件侦听器。
- 默认情况下，延迟加载的组件的偏移量为 100 像素。
- 内置的可见效果（例如模糊、黑白和不透明过渡）有助于改善用户体验。
- 服务器端渲染兼容。
- 支持 TypeScript 声明。
- 占位符默认提供与图像或组件相同的大小，但可以自定义。
Github：github.com/Aljullu/rea…
4. react-lazy-images
react-lazy-images 是一个灵活的库，它提供组件和实用程序来延迟加载 React 中的图像。它使用 render props.为调用者提供了完全的表现控制。其特点如下：
- 使用 IntersectionObserver 和 polyfill 来提高性能。
- 为禁用 SEO 和 JavaScript 的环境提供后备策略。
- 支持服务器端渲染。
- 支持背景图像并与水平滚动一起使用。
GitHub：github.com/fpapado/rea…
5. react-lazy-blur-image
react-lazy-blur-image 是将图像延迟加载到低分辨率占位符中的理想库。默认情况下，该组件显示一个轻量级的灰色占位符，并在组件即将到达视口时替换为实际占位符。仅当实际图像完全延迟加载时，才会替换此占位符。其特点如下：
- 它为延迟加载图像提供了一种简约的方法，提供了完美的用户体验和性能平衡。
- 该组件只接受两个自定义属性：**src **和 style。
- 组件可以使用 **styled-components **从占位符转换图像。
GitHub：github.com/meienberger…
