VirtualList

Example
简单用法
设置初始位置
不等高的item
API

虚拟滚动列表。

何时使用 #

主要用于解决大数据情况下的渲染速度问题。组件的设计思想可以看这篇文章 https://zhuanlan.zhihu.com/p/55329238。

代码演示 #

简单用法 #

使用 VirtualList 最简单的例子。

设置初始位置 #

使用 jumpIndex 设置初始位置

import React from 'react';
import ReactDOM from 'react-dom';
import { VirtualList } from '@alifd/next';
const dataSource = [];
function generateLi(index) {
  return (
    <li key={`key-${index}`} style={{ lineHeight: '20px' }}>
      {'key-'}
      {index}
    </li>
  );
}
function generateData(len) {
  for (let i = 0; i < len; i++) {
    dataSource.push(generateLi(i));
  }
}
class App extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      initial: 50,
      dataSource: generateData(1e3),
    };
  }
  onClick() {
    this.setState({
      initial: this.state.initial + 20,
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick.bind(this)}>
          {'jump to '}
          {this.state.initial + 20}
        </button>
        <br />
        <br />
        <div className="virtual-box">
          <VirtualList ref="virtual" jumpIndex={this.state.initial}>
            {dataSource}
          </VirtualList>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

不等高的item #

使用 jumpIndex 设置初始位置, 并设置 itemSizeGetter

import React, { createRef } from 'react';
import ReactDOM from 'react-dom';
import { VirtualList } from '@alifd/next';
const dataSource = [];
function generateLi(index) {
  if (index % 3 === 0) {
    return (
      <li key={`key-${index}`} style={{ lineHeight: '30px', background: '#5f83ff', color: '#fff' }}>
        {'key-'}
        {index}
      </li>
    );
  } else {
    return (
      <li key={`key-${index}`} style={{ lineHeight: '20px' }}>
        {'key-'}
        {index}
      </li>
    );
  }
}
function generateData(len) {
  for (let i = 0; i < len; i++) {
    dataSource.push(generateLi(i));
  }
}
class App extends React.Component {
  constructor() {
    super(...arguments);
    this.virtualListRef = createRef();
    this.state = {
      initial: 20,
      dataSource: generateData(1e3),
    };
  }
  componentDidMount() {
    setTimeout(() => {
      const instance = this.virtualListRef.current && this.virtualListRef.current.getInstance();
      instance && instance.scrollTo(50);
    }, 200);
  }
  getHeight(index) {
    return index % 3 === 0 ? 30 : 20;
  }
  onClick() {
    this.setState({
      initial: this.state.initial + 20,
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.onClick.bind(this)}>
          {'jump to '}
          {this.state.initial + 20}
        </button>
        <br />
        <br />
        <div className="virtual-box">
          <VirtualList
            ref={this.virtualListRef}
            jumpIndex={this.state.initial}
            itemSizeGetter={this.getHeight.bind(this)}
          >
            {dataSource}
          </VirtualList>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API #

VirtualList #

参数	说明	类型	默认值
children	渲染的子节点	React.ReactElement \| Array<React.ReactElement \| undefined \| null>	-
minSize	最小加载数量	number	1
pageSize	一屏数量	number	10
itemsRenderer	父渲染函数	( items: React.ReactNodeArray, ref: (instance: React.ReactInstance \| null) => React.ReactInstance \| null ) => React.ReactNode	`(items, ref) => <ul ref={ref}>{items}</ul>`
threshold	缓冲区高度	number	100
itemSizeGetter	获取 item 高度的函数	(index?: number) => void	-
jumpIndex	设置跳转位置，需要设置 itemSizeGetter 才能生效，不设置认为元素等高并取第一个元素高度作为默认高	number	0