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，因此每个项目都会声明自己需要重新呈现。实施自定义检查后，它现在非常快！

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

1 个答案: