如何避免重新渲染整个 List 而不是在 React JS 中将新项添加到 DOM 列表中?

IT技术 javascript reactjs react-jsx
2021-04-21 02:42:04

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

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

在此处输入图片说明

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

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

此外,请考虑“重绘”、渲染循环的成本。

1个回答

如果你给列表中的每个项目一个唯一(和确定性)的key=uniqueValueprop,那么 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文档部分阅读更多内容。

@eltonjain 你的术语很混乱。列表中的每个项目都不会重新呈现。在我上面的例子中,列表中的每一项都将被循环并给出一个键。只需要呈现具有新键的项目。现有项目——那些密钥没有改变的项目——将不会被重新渲染上面的简单 for 循环,即使在 50,000 个元素上,也非常快。
2021-05-23 02:42:04
哦,好的。将重新测试并更新您的结果。谢谢
2021-05-25 02:42:04
正是我的观点。如果它是一个 5000 行的密集列表(如 fb),并且每秒我应该收到至少 10 条新记录。如果渲染(这不过是 - 创建新的 VDOM > 每次渲染 5000+ 增加。
2021-05-28 02:42:04
提供钥匙。但考虑到它是一个类似于新闻提要的 facebook。你保持延迟加载,提要只会增加到时代结束。如果对于每一个新的提要项,你都重新渲染整个 FEED,那么 DOM 渲染 + 绘制是多么广泛。
2021-06-16 02:42:04
keyprop的全部意义在于,这意味着您不会重新渲染整个提要,而只是重新渲染新元素(加上删除任何不再存在的元素)。确保每次CommentList渲染时都必须执行 for 循环,但这不是微不足道的。
2021-06-19 02:42:04