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

Question

我有一个很大的名单,让我们说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正在进行比较所有内容的工作,这需要花费大量时间.

Answer 1

好吧我明白了.成功实施shouldComponentUpdate每个项目会带来巨大的性能提升.我没有这么做是因为一个简单的原因.

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

但是......我在每个项目的声明中这样做:

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

这意味着this.props.onClick === nextProps.onClick总是返回false,因此每个项目总是声明自己需要重新呈现.实施自定义检查后,它现在非常快!