使用React突出显示列表中的项目时的性能

Performance when highlighting item in list with React

本文关键字：项目 性能 列表 React 显示 使用      更新时间：2023-09-26

我有一个很大的列表，假设有3k个成员。我有一个呈现这个列表的组件和一个用于每个列表项的组件。在外部组件中我们有这样的代码:

const list = _.map(this.props.items, (item) => {
    return <ListItem key={item.key} {...item} />
});

然后在JSX中放置列表:

<div>
    <h3>Check out my sweet list </h3>
    { list }
</div>

问题来了:我想在用户点击一个项目时显示该项目已被选中。所以在我的ListItem组件中，我有代码，基于单个项目是否具有selected属性，突出显示自己。我如何阻止React重新呈现整个列表，当只有一个项目的选定属性改变?我确信我需要以某种方式重组我的代码，但我不确定什么结构将解决这个问题。很高兴回答任何和所有的问题，并提前感谢!

指出:

    我不是说在一个列表中渲染3k个项目是好的，只是相信这应该是，原则上，可能的反应。
  • 列表并没有在实际的dom上被重新渲染，但是虚拟dom正在做比较所有内容的工作，这需要很多时间。

好吧，我明白了。成功地在每个单独的项目上实施shouldComponentUpdate会带来巨大的性能提升。我没有做到这一点，原因很简单。

shouldComponentUpdate(nextProps) {
    return !_.isEqual(nextProps, this.props);
}
然而

…我在每一项的声明中都是这样做的:

onClick={this.handleItemClick.bind(this, item.key)}

这意味着this.props.onClick === nextProps.onClick将始终返回false，因此每个单独的项目将始终声明自己需要重新呈现。在实现自定义检查之后，它现在非常快!

相关文章：