react18-virtual-scroll

支持虚拟滚动和瀑布流的 高效渲染大数据列表 react 组件

react18-virtual-scroll 基于仅渲染大数据中的部分数据的方式，来帮助我们解决一些常见的的性能瓶颈问题：

1. 它减少了初始渲染和处理更新时的耗时
2. 减少内存占用，从而避免大量 DOM 节点引起的内存泄漏.

安装

# Yarn
yarn add react18-virtual-scroll

# NPM
npm install --save react18-virtual-scroll

使用

属性	说明	类型	默认值	生效组件
data	需要渲染的数据列表	object[ ]	[ ]	all
width	虚拟滚动容器的宽度	string	100%	all
height	虚拟滚动容器的高度	string	500px	all
className	虚拟滚动容器的 class 名	string	""	all
style	虚拟滚动容器的 style 样式	React.CSSProperties	{ }	all
itemNumber	虚拟滚动容器中渲染的数量	number	10	all
overscan	以 itemNumber 为基础向上下额外渲染的数量	number	5	all
gap	虚拟滚动容器每项的间距	number or [ number, number ]	8	all
Item	每一项的渲染组件	Item	必传项	all
getNextData	获取下一页数据的方法	() => void	() => { }	all
getLastData	获取上一页数据的方法	(scrollTo: scrollTo) => void	() => { }	VirtualList
getCurrentIndex	获取当前页面可视区域中第一个 item 的 index	(number) => void	() => { }	VirtualList
columnNumber	瀑布流的列数	number	2	WaterfallVirtualList or NonFixedHeight
isVirtual	是否启用虚拟滚动，禁用虚拟滚动时 itemNumber 和 overscan 失效	boolean	true	WaterfallVirtualList or NonFixedHeight
isUnknownHeight	是否启用自动计算 item 高度，启用后将不在使用 data 中的 height 属性作为高度	boolean	false	all
itemKey	每个 item 中的唯一值，在启用 isUnknownHeight 时必传	string		all
messageType	在 dom 渲染成功后想要修改某个元素的高度时 postMessage 的 type	string		NonFixedHeight

Item 渲染组件类型

type Item = (
  currentData: {
    item: T;
    index: number;
    height: number;
    ref?: React.RefObject<HTMLDivElement>;
  },
  defaultStyle: React.CSSProperties
) => React.JSX.Element;

scrollTo 渲染组件类型

type scrollTo = (obj: {
  top: number;
  left: number;
  behavior?: "smooth" | "auto" | "instant";
}) => void;

使用方法

1. VirtualList (虚拟滚动列表) demo

import React from "react";
import { VirtualList } from "react18-virtual-scroll";

const Home = ({ initialData }) => {
  const { list } = initialData || {};

  const Item = ({ item, index, height }, defaultStyle) => {
    return (
      <div style={{ ...defaultStyle, height }}>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            zIndex: 1,
            backgroundColor: "red",
          }}
        >
          {item.title} - {index}
        </div>
        <img
          src={item.image_url}
          style={{ width: "300px", height: "100%", position: "absolute" }}
          alt=""
        />
      </div>
    );
  };

  return (
    <div>
      <VirtualList data={list} Item={Item} height={"100vh"} width={"100vw"} />
    </div>
  );
};

export default Home;

2. WaterfallVirtualList (瀑布流虚拟滚动) demo

import React from "react";
import { WaterfallVirtualList } from "react18-virtual-scroll";

const Home = ({ initialData }) => {
  const { list } = initialData || {};

  const Item = ({ item, index, height }, defaultStyle) => {
    return (
      <div style={{ ...defaultStyle, height }}>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            zIndex: 1,
            backgroundColor: "red",
          }}
        >
          {item.title} - {index}
        </div>
        <img
          src={item.image_url}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute",
            objectFit: "cover",
          }}
          alt=""
        />
      </div>
    );
  };

  return (
    <div>
      <WaterfallVirtualList
        data={list}
        Item={Item}
        height={"100vh"}
        width={"100%"}
        columnNumber="2"
      />
    </div>
  );
};

export default Home;

3. NonFixedHeight (非固定高度虚拟滚动) demo

import React { useEffect, useState } from "react";
import { NonFixedHeight } from "react18-virtual-scroll";

const Home = ({ initialData }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(
      new Array(30).fill({}).map((item, index) => {
        return {
          ...item,
          index: index,
          height: 200,
          text: new Array(Math.ceil(Math.random() * 5) + 3)
            .fill(1)
            .map(() => {
              return "测试试";
            })
            .join(""),
        };
      })
    );
  }, []);

  const Item: React.FC<{
    item: any;
    index: number;
    height: number | "auto";
    ref: React.RefObject<HTMLDivElement>;
  }> = ({ item, index, height, ref }, defaultStyle) => {
    return (
      <div style={{ overflow: "hidden", ...defaultStyle, height }} ref={ref}>
        <div
          style={{
            zIndex: 1,
            backgroundColor: "red",
          }}
        >
          {item.text}
        </div>
      </div>
    );
  };

  return (
    <div>
      <div
        onClick={() => {
          window.postMessage({ item: { index: 0 }, height: 200, type: "messageType" });
        }}
      >
        点击
      </div>
     <NonFixedHeight
        Item={Item}
        data={data}
        width={"110px"}
        // height={'300px'}
        className="container"
        columnNumber={3}
        isVirtual={true}
        itemNumber={10}
        overscan={5}
        gap={10}
        messageType={"messageType"}
        isUnknownHeight={true}
        itemKey={"index"}
      />
    </div>
  );
};

export default Home;

注意事项

1. data 中需要包含 height 这个 height 必须是真实的渲染高度
2. react18-virtual-scroll 是基于 react 18+ 开发的，对 react 低版本支持程度不高，如在 react 18 - 版本遇到问题可以尝试升级 react 版本到 18+ 解决

问题反馈