Question

我正在处理可能在500到5000件物品范围内的清单。列表中的每个项目都将显示为一个组件，如下所示：

列表

render() {
  return (
    <div className="ItemList">
      <Info items={this.props.items} />
      <ul>
        {this.props.items.map( item =>
          <Item item={item} key={item._id} refresh={this.props.refresh} />
        )}
      </ul>
    </div>
  );
}

项目

render() {
  var item = this.props.item;

  return (
    <li onClick={() => this.setState({showInfo: !this.state.showInfo})} 
                 className="Item">
      <h3 className={this.state.showInfo ? "item-title-bar active" : "item-title-bar"}>
        <div>
          <div className="item-category">
            {item.category} 
          </div>
          <div className="item-name">
            {item.name}
          </div>
        </div>
      </h3>

      {this.state.showInfo &&
        <ItemInfo item={this.props.item} refresh={this.props.refresh} />
      }
    </li>
  );
}

一旦这些列表中的一个达到大约1000个项目，当我点击显示不同的列表时，它明显变慢。 Perf工具向我显示90-150毫秒，用于在1000或2000个项目上显示此列表。只要我渲染它们，我不确定能绕过它。

所以，我正在努力做的事情：

我可以让初始项目更新，然后在后台渲染其他项目，同时应用程序保持响应状态吗？
如何在用户向下滚动页面时显示初始项目，然后加载更多项目？

如果两个选项都不起作用，我可能会尝试加载一些选项，然后在列表底部添加更多节目或显示所有按钮。想尽可能地使其尽可能无缝，也可以打开其他建议。

Answer 1

在处理虚拟列表时，

react-virtualized将是我的首选。这里有很多例子：https://bvaughn.github.io/react-virtualized/#/components/List

如果您提前知道项目的高度，则非常简单，但如果不知道，可以使用CellMeasurer组件。

如何逐步渲染反应组件？

1 个答案: