react-visible-observer：一个超级简单的滚动加载 npm 库

随着现代网页应用的复杂性增加，懒加载和无限滚动已经成为提升用户体验和性能优化的重要技术。然而，许多现有解决方案要么过于复杂，要么性能欠佳。 react-visible-observer 是一个简单而高效的解决方案，旨在简化这些功能的实现。本文将详细介绍如何在你的 React 项目中集成该库，实现轻松的基于滚动的加载。

什么是 `react-visible-observer`？

react-visible-observer 是一个轻量级的 React 钩子，它利用 Intersection Observer API 提供可见性检测。它允许你在元素进入或退出视口时执行回调，非常适合实现懒加载、无限滚动和其他基于可见性的行为。

主要特点：

易于使用：通过一个简单的钩子简化了 Intersection Observer API。
灵活性：可自定义的 root、root margin 和 threshold 选项。
高性能：高效地观察多个元素，性能影响最小。
可扩展性：无缝处理单个和多个元素。

安装

要开始使用 react-visible-observer，通过 npm 安装：

npm install react-visible-observer

或者，如果你更喜欢使用 Yarn：

yarn add react-visible-observer

基本用法

让我们通过一个简单的例子来说明 react-visible-observer 的工作原理。我们将实现一个图像列表的懒加载。

设置钩子：

import React, { useRef } from 'react';
import useIntersectionObserver from 'react-visible-observer';const LazyLoadImages = () => {const imagesRef = useRef([]);// 当元素可见时，设置图片的 src 属性const onVisibilityChange = (isVisible, entry) => {if (isVisible) {const img = entry.target;img.src = img.dataset.src;}};// 使用 Intersection Observer 钩子useIntersectionObserver(imagesRef, onVisibilityChange);const imageUrls = ['image1.jpg','image2.jpg',// 添加更多图像 URL];return (<div>{imageUrls.map((url, index) => (<imgkey={index}data-src={url}ref={(el) => (imagesRef.current[index] = el)}  // 将每个图片元素的引用存储在 imagesRef 中alt="Lazy Loaded"style={{ width: '100%', height: 'auto' }}/>))}</div>);
};export default LazyLoadImages;

自定义选项：

你可以自定义观察器选项以适应你的需求。例如，调整 threshold 和 root margin：

const options = {root: null,rootMargin: '0px 0px 50px 0px',threshold: 0.1,
};useIntersectionObserver(imagesRef, onVisibilityChange, null, options);

root：定义观察器的根元素，即作为视口检测的参考容器。如果不设置或为 null，则默认使用浏览器视窗。
```
root: document.getElementById('scrollArea') // 使用指定的容器作为观察区域。
```
rootMargin：指定根元素的边界，用来扩展或缩小观察区域的大小，格式为 top right bottom left。该设置可以让元素在视图内外一定距离时触发。
```
rootMargin: '0px 0px 50px 0px' // 设置观察区域比实际可视区域提前50像素触发。
```
threshold：决定目标元素可见的比例，触发回调的阈值。可以是单个数值或一个数组，表示多个阈值。
```
threshold: [0.1, 0.5, 0.9] // 当元素可见度达到10%、50%和90%时触发。
```

无限滚动

react-visible-observer 也可以用于实现无限滚动。下面是一个快速示例：

import React, { useState, useRef, useCallback } from 'react';
import useIntersectionObserver from 'react-visible-observer';const InfiniteScrollList = () => {const [items, setItems] = useState(Array.from({ length: 20 }));const loaderRef = useRef(null);const loadMoreItems = useCallback(() => {setItems((prevItems) => [...prevItems,...Array.from({ length: 20 }),]);}, []);const onVisibilityChange = (isVisible) => {if (isVisible) {loadMoreItems();}};useIntersectionObserver(loaderRef, onVisibilityChange);return (<div>{items.map((_, index) => (<div key={index} style={{ height: '100px', border: '1px solid black' }}>Item {index + 1}</div>))}<div ref={loaderRef} style={{ height: '100px', border: '1px solid red' }}>加载更多项目...</div></div>);
};export default InfiniteScrollList;