react-infinite vs react-list vs react-tiny-virtual-list vs react-virtualized vs react-window

npm包名称	下载量	Stars	大小	Issues	发布时间	License
npm包名称	下载量	Stars	大小	Issues	发布时间	License
react-infinite	0	2,687	243 kB	102	-	BSD-3-Clause
react-list	0	1,974	34.9 kB	71	1 年前	MIT
react-tiny-virtual-list	0	2,497	-	54	8 年前	MIT
react-virtualized	0	27,080	2.24 MB	1	1 年前	MIT
react-window	0	17,113	209 kB	1	25 天前	MIT

虚拟化技术

react-infinite:
react-infinite主要支持无限滚动，通过监听滚动事件动态加载更多内容，适合长列表但不支持虚拟化。
react-list:
react-list支持虚拟化和无限滚动，能够根据可见区域渲染列表项，减少DOM节点数量，提高性能。
react-tiny-virtual-list:
react-tiny-virtual-list专注于虚拟化，只渲染可见区域的列表项，极大减少渲染开销，适合大规模数据集。
react-virtualized:
react-virtualized提供全面的虚拟化解决方案，支持列表、表格和网格等多种布局，灵活性高，适合复杂场景。
react-window:
react-window提供轻量级的虚拟化解决方案，支持列表和网格，设计简单，易于使用，性能优越。

包大小

react-infinite:
react-infinite包大小适中，但主要关注无限滚动，虚拟化功能有限。
react-list:
react-list相对较小，提供虚拟化和无限滚动功能，适合对性能有一定要求的应用。
react-tiny-virtual-list:
react-tiny-virtual-list是一个极小的虚拟化库，适合对包大小敏感的项目，提供高性能的虚拟化功能。
react-virtualized:
react-virtualized功能强大但包较大，适合需要多种虚拟化功能的复杂应用。
react-window:
react-window相比react-virtualized更小，提供基本的虚拟化功能，适合大多数应用。

易用性

react-infinite:
react-infinite提供简单的API，易于集成到现有项目中，特别是对于无限滚动场景。
react-list:
react-list提供直观的API，支持快速实现虚拟化和无限滚动，文档清晰易懂。
react-tiny-virtual-list:
react-tiny-virtual-listAPI简单，易于使用，适合快速实现虚拟化列表。
react-virtualized:
react-virtualized功能丰富但学习曲线较陡，适合需要深入定制的开发者。
react-window:
react-window提供简单易用的API，文档完善，适合快速上手。

示例代码

react-infinite:

无限滚动示例

import React from 'react';
import Infinite from 'react-infinite';

const InfiniteList = () => {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

  return (
    <Infinite
      containerHeight={300}
      infiniteLoadBeginEdge={100}
      infiniteLoadBeginBottomOffset={200}
      onInfiniteLoad={() => { /* Load more items */ }}
    >
      {items.map(item => (
        <div key={item} style={{ height: 50 }}>{item}</div>
      ))}
    </Infinite>
  );
};

export default InfiniteList;

react-list:

虚拟化列表示例

import React from 'react';
import { List } from 'react-list';

const VirtualizedList = () => {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

  return (
    <List
      itemRenderer={(index, key) => (
        <div key={key} style={{ height: 50 }}>{items[index]}</div>
      )}
      length={items.length}
      type="uniform"
    />
  );
};

export default VirtualizedList;

react-tiny-virtual-list:

虚拟列表示例

import React from 'react';
import { VariableSizeList } from 'react-tiny-virtual-list';

const itemSize = index => 50; // 每个项的高度
const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

const VirtualList = () => (
  <VariableSizeList
    height={300}
    itemCount={items.length}
    itemSize={itemSize}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style}>{items[index]}</div>
    )}
  </VariableSizeList>
);

export default VirtualList;

react-virtualized:

虚拟化表格示例

import React from 'react';
import { AutoSizer, List } from 'react-virtualized';

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

const VirtualizedList = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        rowCount={items.length}
        rowHeight={() => 50}
        rowRenderer={({ index, style }) => (
          <div style={style} key={index}>{items[index]}</div>
        )}
        width={width}
      />
    )}
  </AutoSizer>
);

export default VirtualizedList;

react-window:

简单虚拟化示例

import React from 'react';
import { FixedSizeList } from 'react-window';

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

const VirtualList = () => (
  <FixedSizeList
    height={300}
    itemCount={items.length}
    itemSize={50}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style}>{items[index]}</div>
    )}
  </FixedSizeList>
);

export default VirtualList;

虚拟滚动和无限滚动

npm下载趋势

GitHub Stars 排名

统计详情

功能对比: react-infinite vs react-list vs react-tiny-virtual-list vs react-virtualized vs react-window

虚拟化技术

包大小

易用性

示例代码

如何选择: react-infinite vs react-list vs react-tiny-virtual-list vs react-virtualized vs react-window

热门对比

与react-infinite类似的npm包

与react-list类似的npm包

与react-tiny-virtual-list类似的npm包

与react-virtualized类似的npm包

与react-window类似的npm包

react-infinite的README

React Infinite

Installation

In the Browser

In NPM

In Browserify

Basic Use

Elements of Equal Height

Elements of Varying Heights

Using the Window to Scroll (useWindowAsScrollContainer mode)

As A Chat or Message Box (displayBottomUpwards mode)

Note on Smooth Scrolling

Static Methods

Function Infinite.containerHeightScaleFactor(Number number)

Configuration Options

Children

Major Display Modes

Bool useWindowAsScrollContainer

Bool displayBottomUpwards

Configuration Options

(Required) Number | [Number] elementHeight

Number containerHeight

Number | Object preloadBatchSize

Number | Object preloadAdditionalHeight

Function handleScroll(DOMNode node)

Number infiniteLoadBeginEdgeOffset

Function onInfiniteLoad()

React Node loadingSpinnerDelegate

Bool isInfiniteLoading

Number timeScrollStateLastsForAfterUserScrolls

String className

Sample Code

Contributing to React Infinite

Using the Window to Scroll (`useWindowAsScrollContainer` mode)

As A Chat or Message Box (`displayBottomUpwards` mode)

Function `Infinite.containerHeightScaleFactor(Number number)`

Bool `useWindowAsScrollContainer`

Bool `displayBottomUpwards`

(Required) Number | [Number] `elementHeight`

Number `containerHeight`

Number | Object `preloadBatchSize`

Number | Object `preloadAdditionalHeight`

Function `handleScroll(DOMNode node)`

Number `infiniteLoadBeginEdgeOffset`

Function `onInfiniteLoad()`

React Node `loadingSpinnerDelegate`

Bool `isInfiniteLoading`

Number `timeScrollStateLastsForAfterUserScrolls`

String `className`