如何避免重新呈现整个列表，而不是在react中将新项添加到DOM列表中？

Question

在React演示和其他示例中，我看到如果添加或删除一条记录，人们会重新设置状态数据。这将导致重新呈现整个列表，而不是简单地追加最新记录，或者从当前DOM树中删除选定的记录。

这有什么用？或者我怎么才能避免这个案子。

​

​

更新的情况: Facebook提要，你继续滚动的提要，达到大约5000个提要状态和许多其他类型的卡片。不仅如此，每个状态提要都有自己的“评论列表”。

每一秒，5-10张状态卡都会预先发送到您的墙上，或者在延迟加载的情况下追加。即。每一秒，您都会重新呈现n+n*0.5，比如n可以超过5000张卡.

另外，也要考虑“重新绘制”、渲染循环的成本。

Answer 1

如果您给列表中的每一项都提供了唯一(且具有确定性的) key=uniqueValue支柱，那么在键未更改的情况下，React将保留列表项，从而避免重新呈现整个列表。

render() {
  var comments = comments.map(function(comment){
    return (
      <Comment
        key={comment.id} // This should be a unique, deterministic value
        ...
      />
    );
  });

  return(
    <div>
      {comments}
    </div>
  ); 
}

阅读React的动感儿童文档部分中的更多内容。