react实现列表图片懒加载

在 React 中实现列表图片的懒加载，我们可以结合使用 `react-lazyload` 库和 `Intersection Observer API`。以下是基于这两个工具的实现步骤：

1. 首先，安装 `react-lazyload` 库。

npm install react-lazyload

2. 在列表组件中引入 `react-lazyload` 组件，并使用 `Intersection Observer API` 监听图片是否进入可视区域。

import React from 'react';
import LazyLoad from 'react-lazyload';

const ListItem = ({ imageUrl, altText }) => {
  return (
    <LazyLoad>
      <img src={imageUrl} alt={altText} />
    </LazyLoad>
  );
};

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <ListItem imageUrl={item.imageUrl} altText={item.altText} />
        </li>
      ))}
    </ul>
  );
};

export default ListComponent;

在上述代码中，我们使用 `react-lazyload` 组件包裹了 `<img>` 元素，并将图片的地址和替代文本作为属性传递给子组件 `ListItem`。当图片进入可视区域时，`react-lazyload` 会自动加载图片。

3. 在父组件中使用 `ListComponent`，并传递图片数据给列表组件。

import React from 'react';
import ListComponent from './ListComponent';

const App = () => {
  const items = [
    { id: 1, imageUrl: 'image1.jpg', altText: 'Image 1' },
    { id: 2, imageUrl: 'image2.jpg', altText: 'Image 2' },
    { id: 3, imageUrl: 'image3.jpg', altText: 'Image 3' },
    // 更多图片数据
  ];

  return (
    <div>
      <h1>List of Images</h1>
      <ListComponent items={items} />
    </div>
  );
};

export default App;

在父组件中，我们创建了一个包含图片数据的数组，并将其传递给列表组件 `ListComponent`。列表组件会根据传递的数据生成相应的图片项。

通过以上步骤，我们可以在 React 中实现列表图片的懒加载。 `react-lazyload` 库会自动处理图片的加载，只有当图片进入可视区域时才进行加载，从而提升页面性能和用户体验。