高级套娃之react-virtualized建议收藏

高级套娃react-virtualized

概述

• 可以解决页面中长列表的渲染，实现在动态在可视区域加载内容
• react-virtualized 是React组件，用来高效渲染大型列表和表格数据
• GitHub地址： react-virtualized

基本使用

npm install react-virtualized --save
// 安装该组件

• 之后在项目中导入便可
  • import { } from ‘react-virtualized’

list

• GitHub地址：list

• 基本使用

    <List
      autoHeight
      <!-- 组件的宽度 -->
      width={
       width}
      <!-- 组件的高度 -->
      height={
       height}
      <!-- 每一行的数量 -->
      rowCount={
       count}
      <!-- 每行的高度 -->
      rowHeight={
       120}
      <!-- 渲染每一行的内容 -->
      rowRenderer={
       this.rowRenderer}
    />
      <!-- 渲染每一行的内容 -->
      rowRenderer({
       
        key,         // 每一行的唯一标识
        index,       // 索引号
        style        // 重点属性：一定要给每一个行数添加该样式
        isScrolling, // 当前列表是否在滚动中
        isVisible,   //这一行是否在列表中可见
        }) {
       
          return (
            <div key={
       key} style={
       style}>
              {
       list[index]}
            </div>
          );
      }
  

• 这样使用后虽然可以实现长列表的展示，但是因为高度无法确定所以我们需