如何避免重新呈现整个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道具，则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的Dynamic Children doc部分中阅读更多内容。