这是一个很大的问题，也是一个理想的用例
setTimeout，可以为该事件安排下一个事件循环的更新。
与其存储要渲染的组件数量，不如存储一个组件数组并直接渲染它们。
jsfiddle
var CommentBox = React.createClass({ getInitialState: function() { return { boxes: [<Box key="first" />] }; }, heavyLoadRender: function() { setTimeout(() => { if (this.state.boxes.length < 50000) { this.setState({ boxes: this.state.boxes.concat(<Box key={this.state.boxes.length} />) }) this.heavyLoadRender() } }) }, render: function() { return ( <div> <button onClick={this.heavyLoadRender}>Start</button> {this.state.boxes} </div> ) } })更新：
如果只想在阵列填满后显示状态，则在达到该大小之前不显示任何内容：
这不起作用：
{ this.state.boxes.length === 50000 && this.state.boxes }希望并没有失去！使用风格！
<div style={{ display: this.state.boxes.length === 50000 ? 'block' : 'none' }}> { this.state.boxes }</div>如果要提高速度，则可以按
setTimeout
var newBoxes = []for (var i = 0; i < 5; i++) { newBoxes.push(<Box />)}this.setState({ boxes: this.state.boxes.concat(newBoxes)})更新小提琴。我认为整个问题类别都需要花费一些时间来执行。在10,000个批次中，基本的包装盒组件不会阻塞，您可以轻松地将装载微调器扔到那里。
