在React数组上不断重新渲染的问题

Question

我正在开发一个React组件，它包含一个对象，格式如下：

{
  data: [{item1}, {item2}, ..., {item10}],
  filters: { ...filterOptions },
}

父组件render功能基本上将data映射到另一个名为ItemSelector组件。 然后， ItemSelector检查项类型并呈现特定Item 。

我实现了一个分页功能，它将使用一个新的数组更新data键（通过一个新的数组，我的意思是我使用immutability-helper和$set操作更新reducer属性）。 尽管Array是一个新对象， {item1}, {item2}, ..., {item10}始终是相同的对象，但现在数组从{item1}转到{item20} 。

我面临的问题是我无法避免重新渲染已经在Array上的项目，浪费了已经渲染的项目的计算。 我尝试为ItemSelector设置一个唯一键，并从父组件中删除ItemSelector并使用唯一键直接调用特定的Item组件，但它没有解决问题。

有没有什么办法可以防止在已经渲染Item组件时重新渲染它？

Answer 1

在某些情况下，您可以使用React.memo来解决此问题。

简单的例子@ codepen.io

const Item = React.memo((props) => {
  console.log(`${props.title} rendered`); // check browser console
  return <li>{props.title}</li>;
});

但它在文件中说：

此方法仅作为性能优化存在。 不要依赖它来“防止”渲染，因为这会导致错误。