react-window vs react-virtualized vs react-infinite-scroll-component vs react-infinite-scroller vs vue-virtual-scroller vs ngx-infinite-scroll vs vue-infinite-loading
機能比較: react-window vs react-virtualized vs react-infinite-scroll-component vs react-infinite-scroller vs vue-virtual-scroller vs ngx-infinite-scroll vs vue-infinite-loading
フレームワーク
react-window:
React専用
react-virtualized:
React専用
react-infinite-scroll-component:
React専用
react-infinite-scroller:
React専用
vue-virtual-scroller:
Vue.js専用
ngx-infinite-scroll:
Angular専用
vue-infinite-loading:
Vue.js専用
無限スクロール機能
react-window:
仮想化されたリストで無限スクロールをサポート
react-virtualized:
無限スクロールと仮想化を組み合わせて効率的に表示
react-infinite-scroll-component:
スクロール位置に応じてコンテンツを追加
react-infinite-scroller:
スクロールイベントに基づいてコンテンツをロード
vue-virtual-scroller:
仮想化されたリストで無限スクロールを実現
ngx-infinite-scroll:
スクロール位置に基づいて自動的にコンテンツをロード
vue-infinite-loading:
スクロールに応じてコンテンツを追加
仮想化
react-window:
軽量な仮想化リストとグリッドを提供
react-virtualized:
仮想化リスト、グリッド、セルを提供
react-infinite-scroll-component:
仮想化はサポートしていない
react-infinite-scroller:
仮想化はサポートしていない
vue-virtual-scroller:
仮想化リストを提供し、パフォーマンスを向上
ngx-infinite-scroll:
仮想化はサポートしていない
vue-infinite-loading:
仮想化はサポートしていない
カスタマイズ性
react-window:
シンプルでカスタマイズしやすい
react-virtualized:
高度なカスタマイズが可能だが、設定が複雑
react-infinite-scroll-component:
カスタマイズが容易で、プロップスを通じて設定可能
react-infinite-scroller:
シンプルなAPIでカスタマイズ可能
vue-virtual-scroller:
仮想化に関するカスタマイズが可能
ngx-infinite-scroll:
カスタマイズ可能だが、Angularに依存
vue-infinite-loading:
カスタマイズ可能なローディングインジケーターを提供
コード例
react-window:
Reactでの仮想化リストの例
import { FixedSizeList as List } from 'react-window';
const Example = () => {
return (
<List
height={300}
itemCount={items.length}
itemSize={35}
width={300}
>
{({ index }) => <div>{items[index]}</div>}
</List>
);
};
react-virtualized:
Reactでの仮想化リストと無限スクロールの例
import { List } from 'react-virtualized';
const Example = () => {
return (
<List
height={300}
width={300}
rowCount={items.length}
rowHeight={50}
rowRenderer={({ index }) => <div>{items[index]}</div>}
/>
);
};
選び方: react-window vs react-virtualized vs react-infinite-scroll-component vs react-infinite-scroller vs vue-virtual-scroller vs ngx-infinite-scroll vs vue-infinite-loading
react-window is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from React DevTools to the Replay browser.
Support
If you like this project there are several ways to support it:
This component will receive an index and style prop by default.
Additionally it will receive prop values passed to rowProps.
ℹ️ The prop types for this component are exported as RowComponentProps
rowCount
Number of items to be rendered in the list.
rowHeight
Row height; the following formats are supported:
number of pixels (number)
percentage of the grid's current height (string)
function that returns the row height (in pixels) given an index and cellProps
dynamic row height cache returned by the useDynamicRowHeight hook
⚠️ Dynamic row heights are not as efficient as predetermined sizes.
It's recommended to provide your own height values if they can be determined ahead of time.
rowProps
Additional props to be passed to the row-rendering component.
List will automatically re-render rows when values in this object change.
⚠️ This object must not contain ariaAttributes, index, or style props.
Optional props
Name
Description
className
CSS class name.
style
Optional CSS properties.
The list of rows will fill the height defined by this style.
children
Additional content to be rendered within the list (above cells).
This property can be used to render things like overlays or tooltips.
defaultHeight
Default height of list for initial render.
This value is important for server rendering.
listRef
Ref used to interact with this component's imperative API.
This API has imperative methods for scrolling and a getter for the outermost DOM element.
ℹ️ The useListRef and useListCallbackRef hooks are exported for convenience use in TypeScript projects.
onResize
Callback notified when the List's outermost HTMLElement resizes.
This may be used to (re)scroll a row into view.
onRowsRendered
Callback notified when the range of visible rows changes.
overscanCount
How many additional rows to render outside of the visible area.
This can reduce visual flickering near the edges of a list when scrolling.
tagName
Can be used to override the root HTML element rendered by the List component.
The default value is "div", meaning that List renders an HTMLDivElement as its root.
⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.
Grid
Required props
Name
Description
cellComponent
React component responsible for rendering a cell.
This component will receive an index and style prop by default.
Additionally it will receive prop values passed to cellProps.
ℹ️ The prop types for this component are exported as CellComponentProps
cellProps
Additional props to be passed to the cell-rendering component.
Grid will automatically re-render cells when values in this object change.
⚠️ This object must not contain ariaAttributes, columnIndex, rowIndex, or style props.
columnCount
Number of columns to be rendered in the grid.
columnWidth
Column width; the following formats are supported:
number of pixels (number)
percentage of the grid's current width (string)
function that returns the row width (in pixels) given an index and cellProps
rowCount
Number of rows to be rendered in the grid.
rowHeight
Row height; the following formats are supported:
number of pixels (number)
percentage of the grid's current height (string)
function that returns the row height (in pixels) given an index and cellProps
Optional CSS properties.
The grid of cells will fill the height and width defined by this style.
children
Additional content to be rendered within the grid (above cells).
This property can be used to render things like overlays or tooltips.
defaultHeight
Default height of grid for initial render.
This value is important for server rendering.
defaultWidth
Default width of grid for initial render.
This value is important for server rendering.
gridRef
Ref used to interact with this component's imperative API.
This API has imperative methods for scrolling and a getter for the outermost DOM element.
ℹ️ The useGridRef and useGridCallbackRef hooks are exported for convenience use in TypeScript projects.
onCellsRendered
Callback notified when the range of rendered cells changes.
onResize
Callback notified when the Grid's outermost HTMLElement resizes.
This may be used to (re)scroll a cell into view.
overscanCount
How many additional rows/columns to render outside of the visible area.
This can reduce visual flickering near the edges of a grid when scrolling.
tagName
Can be used to override the root HTML element rendered by the List component.
The default value is "div", meaning that List renders an HTMLDivElement as its root.
⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.
