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

Question

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

它有什么帮助？或者我怎样才能避免这种情况。

更新情况：Facebook 提要，您不断滚动提要，达到大约 5000 个提要状态和许多其他类型的卡片。不仅如此，每个状态提要都有自己的 "comment list".

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

此外，请考虑 "repainting" 渲染循环的成本。

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 的 Dynamic Children 文档部分阅读更多内容。

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

How to avoid re-rendering the whole List instead of adding the new item to the DOM list in react JS?

javascript

reactjs

react-jsx