反应性能问题。呈现异步项目列表等待所有要解决的承诺

Question

示例：

import React, { Component } from 'react';

class ListItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 'bla'
    };

    new Promise(resolve => {
      resolve(props.value);
    }).then(res => {
      this.setState({ value: res });
    });
  }

  render() {
    return <div>{this.state.value}</div>
  }
}

class App extends Component {
  render() {
    const els = [];
    for (let i = 0; i< 1000; i++) {
      els.push(<ListItem key={i} value={i} />)
    }
    return (
      <div className="App">
        {els}
      </div>
    );
  }
}

export default App;

当App呈现时，它等待ListItem的所有承诺解决。

我希望App立即呈现，并ListItem在每个承诺结算后逐步更新。

我尝试将new Promise(...).then(...)移到componentDidMount但是没有帮助。

我知道我可以将this.setState(...)包裹到setTimeout中，但这对我来说似乎有些不好。