如何避免重新呈现整个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 动态儿童文档部分中的更多内容.