react-virtualized(可视区域List)组件的使用

1:组件地址

https://github.com/bvaughn/react-virtualized

1:添加依赖

npm install react-virtualized --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';
// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

首先选择List 选择source查看列表源码

import {List} from 'react-virtualized';
<List
       width={window.screen.width}
       height={window.screen.height-45}
      //列表数
       rowCount={this.state.citysList.length}
      //行高,可以直接写高度,也可以是个函数,当行高不确定时,就需要在函数里面计算返回了
       rowHeight={this.rowHeight}
       rowRenderer={this.rowRenderer}
       //滚动触发
       onRowsRendered={this.onRowsRendered}
      //当前滚动到那一列,与下面结合使用,否者可能会有bug
       scrollToIndex={this.state.activeIndex}
       scrollToAlignment="start"
  />
//** rowRenderer函数**
 function rowRenderer({
  index, // Index of row
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List (eg it is not an overscanned row)
  key, // Unique key within array of rendered rows
  parent, // Reference to the parent List (instance)
  style, // Style object to be applied to row (to position it);
  // This must be passed through to the rendered row element.
}) {
  const user = list[index];

  // If row content is complex, consider rendering a light-weight placeholder while scrolling.
  const content = isScrolling ? '...' : <User user={user} />;

  // Style is required since it specifies how the row is to be sized and positioned.
  // React Virtualized depends on this sizing/positioning for proper scrolling behavior.
  // By default, the List component provides following style properties:
  //    position
  //    left
  //    top
  //    height
  //    width
  // You can add additional class names or style properties as you would like.
  // Key is also required by React to more efficiently manage the array of rows.
  return (
    <div key={key} style={style}>
      {content}
    </div>
  );
}

选择Docs查看List相关参数和函数 List:Prop Types1 List:Prop Types2