react-virtualized 渲染大数据列表

1. 先给出网址 : 看示例
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md
2. 解释一些概念 :
发现 问题 : 普通的加载方法 , 通常是下拉再请求, 会有一个停顿的状态 . 看起来很 low

解决问题 : react-virtualized 能做到 在一个滚动的范围内，呈现你给定数据的一小部分，大量缩减了呈现组件所需的时间，以及创建DOM节点的数量。

缺点：滑动过快，会报错 , 这是我们可以 加一个 loading , 出现空白的情况。

3. 使用方法 : ( 具体 可以看 上面的网址 )

  // 1. 先导入
import { InfiniteLoader, List } from 'react-virtualized';      

2.  赋值粘贴 结构代码
<InfiniteLoader
    isRowLoaded={isRowLoaded}
    loadMoreRows={loadMoreRows}
    rowCount={remoteRowCount}
  >
    {({ onRowsRendered, registerChild }) => (
      <List
        height={200}
        onRowsRendered={onRowsRendered}
        ref={registerChild}
        rowCount={remoteRowCount}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={300}
      />
//  这里的<List>就是 你要渲染的 列表结构 ,  将他包裹 在    <InfiniteLoader> 里面
    )}
  </InfiniteLoader>,

3. 绑定几个函数 , 要写成箭头函数 的 方式 , 否则会有 指向 问题
 isRowLoaded= ({ index })=> {
  return !!list[index];
}

loadMoreRows= ({ startIndex, stopIndex })=> {
  return fetch(`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`)
    .then(response => {
      // Store response data in list...
    })
}

rowRenderer= ({ key, index, style})=> {
  return (
    <div
      key={key}
      style={style}
    >
      {list[index]}
    </div>
  )
}