Question

我正在开发一个具有以下格式的对象的React Component：

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

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

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

我面临的问题是我无法避免重新渲染Array中已经存在的项目，从而浪费了对已渲染项目的计算。我尝试为{item20}设置一个唯一键，并从父组件中删除ItemSelector并直接使用唯一键调用特定的ItemSelector组件，但这并不能解决问题。 / p>

有什么方法可以防止在渲染Item组件后重新渲染？

Answer 1

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

Simple example @ codepen.io

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

但是它在文档中说：

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

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

1 个答案: