如何逐步渲染反应组件？

Question

I'm working with lists that will likely be in the range of 500 up to maybe 5000 items. Each item in the list will show as a component, like so:

List

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>
  );
}

Item

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>
  );
}

Once one of these lists gets up to around 1000 items, it's noticeably slow when I click to show a different list. Perf tools are showing me 90-150 ms for displaying this list at 1000 or 2000 items. Not sure I can get around that as long as I'm rendering them.

So, what I'm trying to do:

1. Can I let the initial items update, then render others in the background, while the app remains responsive?

2. How can I show initial items, then load more as the user scrolls down the page?

If neither option works, I'll probably try to load a few, then add a show more or show all button at the bottom of the list. Want to make this as seamless as possible though, open to other suggestions as well.

Answer 1

react-virtualized would be my first choice when dealing with a virtual list. Lot of examples here: https://bvaughn.github.io/react-virtualized/#/components/List

Pretty simple if you know the heights of the items ahead of time, but can use the CellMeasurer component if you don't.