React组件react-virtualized，高效渲染大型列表和表格数据

官方文档地址https://github.com/bvaughn/react-virtualized，具体使用看docs文档，根据文档去使用，本博客记录好客租房项目中react-virtualized对城市列表的部分使用。

1.安装

npm i react-virtualized

2.在项目入口文件 index.js 中导入样式文件（只导入一次即可）

// 导入 react-virtualized 组件的样式
import 'react-virtualized/styles.css'

3.找到相应的自己需要用的组件，这里我使用的List，链接如下：https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md

4.在文档中找到相应的示例代码

// 导入List组件
import { List } from 'react-virtualized'

// 列表数据的数据源
const list = Array(100).fill('react-virtualized')
// 渲染每一行数据的函数
function rowRenderer({
  key, // Unique key within array of rows
  index, // 索引号
  isScrolling, // 当前项是否正在滚动中
  isVisible, // 当前项在list中是可见的
  style, // 注意：重点属性，一定要给每一行数据添加该样式
}) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  )
}

{/* 城市列表 */}
<List
  width={300}
  height={300}
  rowCount={list.length}
  rowHeight={20}
  rowRenderer={rowRenderer}
/>

5.为了让List组件占满屏幕，使用AutoSizer组件，https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

{/* 城市列表 */}
<AutoSizer>
  {({ height, width }) => (
	<List
	  ref={this.cityListComponent}
	  width={width}
	  height={height}
	  rowCount={this.state.cityIndex.length}
	  rowHeight={this.getRowHeight}
	  rowRenderer={this.rowRenderer}
	  onRowsRendered={this.onRowsRendered}
	  scrollToAlignment="start"
	/>
  )}
</AutoSizer>
{/* 右侧索引列表 */}
<ul className="city-index">{this.renderCityIndex()}</ul>

调整样式，让页面不要出现全局滚动条，避免顶部导航栏滚动

6.使用List组件渲染列表

 // List组件渲染每一行数据的函数
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // 索引号
    isScrolling, // 当前项是否正在滚动中
    isVisible, // 当前项在list中是可见的
    style, // 注意：重点属性，一定要给每一行数据添加该样式
  }) => {
    // 获取每一行的字母索引
    const { cityIndex, cityList } = this.state
    // index 索引号
    const letter = cityIndex[index]
    // 获取指定字母索引下的城市列表
    // console.log(cityList[letter])
    return (
      <div key={key} style={style} className="city">
        <div className="title">{formatCityIndex(letter)}</div>
        {cityList[letter].map((item) => (
          <div
            className="name"
            key={item.value}
            onClick={() => this.changeCity(item)}
          >
            {item.label}
          </div>
        ))}
      </div>
    )
  }

7.给 List 组件添加 onRowsRendered 配置项，用于获取当前列表渲染的行信息

// 用于获取List组件中渲染行的信息
onRowsRendered = ({ startIndex }) => {
  // console.log(startIndex)
  if (this.state.activeIndex !== startIndex) {
    this.setState({
      activeIndex: startIndex,
    })
  }
}

8.调用 List 组件的 scrollToRow 方法，让 List 组件滚动到指定行

// 封装渲染右侧索引列表的方法
  renderCityIndex() {
    const { cityIndex, activeIndex } = this.state
    return cityIndex.map((item, index) => (
      <li
        className="city-index-item"
        key={item}
        onClick={() => {
          this.cityListComponent.current.scrollToRow(index)
        }}
      >
        <span className={activeIndex === index ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item.toUpperCase()}
        </span>
      </li>
    ))
  }

9.设置 List 组件的 scrollToAlignment 配置项值为 start ，保证被点击行出现在页面顶部（见第5步代码）

这篇好文章是转载于：学新通技术网