mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
4.6 KiB
4.6 KiB
order | title | ||||
---|---|---|---|---|---|
7 |
|
zh-CN
结合 react-virtualized 实现滚动加载无限长列表,带有虚拟化(virtualization)功能,能够提高数据量大时候长列表的性能。
virtualized
是在大数据列表中应用的一种技术,主要是为了减少不可见区域不必要的渲染从而提高性能,特别是数据量在成千上万条效果尤为明显。了解更多
en-US
An example of infinite list & virtualized loading using react-virtualized. Learn more.
Virtualized
rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.
import { List, message, Avatar, Spin } from 'antd';
import reqwest from 'reqwest';
import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import VList from 'react-virtualized/dist/commonjs/List';
import InfiniteLoader from 'react-virtualized/dist/commonjs/InfiniteLoader';
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
class VirtualizedExample extends React.Component {
state = {
data: [],
loading: false,
};
loadedRowsMap = {};
componentDidMount() {
this.fetchData(res => {
this.setState({
data: res.results,
});
});
}
fetchData = callback => {
reqwest({
url: fakeDataUrl,
type: 'json',
method: 'get',
contentType: 'application/json',
success: res => {
callback(res);
},
});
};
handleInfiniteOnLoad = ({ startIndex, stopIndex }) => {
let { data } = this.state;
this.setState({
loading: true,
});
for (let i = startIndex; i <= stopIndex; i++) {
// 1 means loading
this.loadedRowsMap[i] = 1;
}
if (data.length > 19) {
message.warning('Virtualized List loaded all');
this.setState({
loading: false,
});
return;
}
this.fetchData(res => {
data = data.concat(res.results);
this.setState({
data,
loading: false,
});
});
};
isRowLoaded = ({ index }) => !!this.loadedRowsMap[index];
renderItem = ({ index, key, style }) => {
const { data } = this.state;
const item = data[index];
return (
<List.Item key={key} style={style}>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={<a href="https://ant.design">{item.name.last}</a>}
description={item.email}
/>
<div>Content</div>
</List.Item>
);
};
render() {
const { data } = this.state;
const vlist = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered, width }) => (
<VList
autoHeight
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={2}
rowCount={data.length}
rowHeight={73}
rowRenderer={this.renderItem}
onRowsRendered={onRowsRendered}
scrollTop={scrollTop}
width={width}
/>
);
const autoSize = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered }) => (
<AutoSizer disableHeight>
{({ width }) =>
vlist({
height,
isScrolling,
onChildScroll,
scrollTop,
onRowsRendered,
width,
})
}
</AutoSizer>
);
const infiniteLoader = ({ height, isScrolling, onChildScroll, scrollTop }) => (
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.handleInfiniteOnLoad}
rowCount={data.length}
>
{({ onRowsRendered }) =>
autoSize({
height,
isScrolling,
onChildScroll,
scrollTop,
onRowsRendered,
})
}
</InfiniteLoader>
);
return (
<List>
{data.length > 0 && <WindowScroller>{infiniteLoader}</WindowScroller>}
{this.state.loading && <Spin className="demo-loading" />}
</List>
);
}
}
ReactDOM.render(<VirtualizedExample />, mountNode);
.demo-loading {
position: absolute;
bottom: -40px;
left: 50%;
}