阅读 1933

React如何渲染大数据量的列表?

我们经常会遇到这种需求,根据数据展示列表。这种代码估计你已经撸过成百上千次了。

但如果你需要同时展示成千上万条数据呢,必然会造成浏览器卡顿,丢帧,甚至卡死的问题。

本文将介绍利用react-virtualized来高效渲染大数据量列表。

开始吧!

首先创建一个React 应用

create-react-app virtualization
复制代码

应用将展示1000条如下这样的评论:

我们引入第三方库lorem-ipsum来生成模拟数据:

cd virtualization

npm install --save lorem-ipsum
复制代码

src/App.js 中引入 lorem-ipsum

import loremIpsum from 'lorem-ipsum';
复制代码

接下来创造一个1000条数据的数组:

const rowCount = 1000;

class App extends Component {
  constructor() {
    super();
    this.list = Array(rowCount).fill().map((val, idx) => {
      return {
        id: idx, 
        name: 'John Doe',
        image: 'http://via.placeholder.com/40',
        text: loremIpsum({
          count: 1, 
          units: 'sentences',
          sentenceLowerBound: 4,
          sentenceUpperBound: 8 
        })
      }
    });
  }
  //...
}
复制代码

以上每条数据都包含 id用户名图片随机生成4~8个字评论

render() 中使用这个数组:

render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <div className="list">
        {this.list.map(this.renderRow.bind(this))}
      </div>
    </div>
  );
}
复制代码

增加 renderRow() 来创造列:

renderRow(item) {
  return (
    <div key={item.id} className="row">
      <div className="image">
        <img src={item.image} alt="" />
      </div>
      <div className="content">
        <div>{item.name}</div>
        <div>{item.text}</div>
      </div>
    </div>
  );
}
复制代码

src/App.css 中加点样式:

.list {
  padding: 10px;
}

.row { 
  border-bottom: 1px solid #ebeced;
  text-align: left;
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.image {
  margin-right: 10px;
}

.content {
  padding: 10px;
}
复制代码

好了,启动项目 yarn start,可以看到如下画面:

查看元素,我们可以看到 DOM 上挂载了非常多的 div

我们来测测性能

如果你用的是 Chrome,只需几步,快速测试性能:

  • 打开开发者工具
  • 按Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) 来打开命令菜单
  • 输入 render,下拉框中选择 Show Rendering
  • 点击 render 页签,FPS Meter 前打钩。
  • 滚动列表

我们可以看到,当滚动条滚动的时候,帧率从60掉到了38左右。这还是只有1000条数据情况,如果再增大数据,浏览器会出现卡顿,甚至卡死。

接着我们来看看react-virtualized是如何提高性能的?

react-virtualized原理

核心原理:只渲染你所见的。

上面的应用渲染了1000条评论,但屏幕只为你展示了10来条数据,那另外990条的渲染就是浪费的。

如果我们只渲染可见的评论,当鼠标滚动查看更多的时候,将新的节点替换旧的节点。这样就完美解决了性能瓶颈的问题。

怎么用呢?

首先在 src/App.js 中,引入 List 组件:

import { List } from "react-virtualized";
复制代码

替换 render() 原有代码:

<div className="list">

  {this.list.map(this.renderRow.bind(this))}

</div>
复制代码

使用 List 组件

const listHeight = 600;

const rowHeight = 50;

const rowWidth = 800;

//...

<div className="list">

  <List

    width={rowWidth}

    height={listHeight}

    rowHeight={rowHeight}

    rowRenderer={this.renderRow.bind(this)}

    rowCount={this.list.length} />

</div>
复制代码

改写 renderRow()

renderRow({ index, key, style }) {
  return (
    <div key={key} style={style} className="row">
      <div className="image">
        <img src={this.list[index].image} alt="" />
      </div>
      <div className="content">
        <div>{this.list[index].name}</div>
        <div>{this.list[index].text}</div>
      </div>
    </div>
  );
}
复制代码

启动应用 yarn start

查看元素:

可以看到只渲染了可见的元素。

性能怎么样呢?

用上面相同的方法测试:

可以看到基本维持在60帧左右。性能杠杠的(^_^)

以上只是对react-virtualized的简单应用,感兴趣可以去试试!

感谢阅读!

本文翻译自Esteban HerreraRendering large lists with React Virtualized

关注下面的标签,发现更多相似文章
评论
说说你的看法