react中列表懒加载如何实现

在 React 中实现列表懒加载的常见方式是使用 React 中提供的 `React.lazy` 和 `Suspense` 组件。

1. 使用 `React.lazy` 实现动态导入组件。

const LazyComponent = React.lazy(() => import("./LazyComponent"));

2. 在 `Suspense` 组件中包装需要懒加载的组件。

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

3. 在列表组件中，当滚动到页面底部时，使用 `setState` 更新状态，增加要显示的列表项数量。例如：

class List extends React.Component {
  state = {
    itemsToShow: 10,
  };

  handleScroll = () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight) {
      this.setState((prevState) => ({ itemsToShow: prevState.itemsToShow + 10 }));
    }
  };

  render() {
    const { items, renderItem } = this.props;
    const { itemsToShow } = this.state;
    const visibleItems = items.slice(0, itemsToShow);
    return (
      <div onScroll={this.handleScroll}>
        {visibleItems.map((item) => (
          <React.Fragment key={item.id}>{renderItem(item)}</React.Fragment>
        ))}
      </div>
    );
  }
}

这样的话，当用户滚动到页面底部时，会触发 `handleScroll` 函数，更新 `state` 中的 `itemsToShow` 值，从而增加要显示的列表项数量。由于列表项是通过 `React.lazy` 动态导入的，因此只有当用户滚动到底部时才会渲染新的列表项，从而实现了列表的懒加载。