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

Question

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

它有什么用？ 或者我该如何避免这种情况。

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

每秒钟，5-10张状态卡预先挂在墙上，或者在延迟加载的情况下附加。 即。 每秒，你重新渲染n + n * 0.5，其中n可以超过5000张卡。

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

Answer 1

如果为列表中的每个项目赋予唯一（且确定性） key=uniqueValue prop，则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 动态儿童文档部分中的更多内容。