如何防止我的 React 组件不必要地渲染？

Question

我有一个反应应用程序。在这个应用程序上，我正在渲染 10 个表格。当用户对表格进行更改时，我只希望重新渲染一个表格，而不是全部 10 个。

为了完成这个任务，我使用了React.useMemo() 和一个比较器函数。这里是：

function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
  const { categoryTotal: ctPrev, ...prev } = prevProps;
  const { categoryTotal: ctNext, ...next } = nextProps;

  if (
    !ctPrev.totalPrice.eq(ctNext.totalPrice) &&
    !ctPrev.totalWeight.eq(ctNext.totalWeight) &&
    !ctPrev.totalWorn.eq(ctNext.totalWorn) &&
    !ctPrev.totalConsumable.eq(ctNext.totalConsumable)
  ) {
    console.log('totals did change')
    return false;
  }

  for (var key in next) {
    if (next[key] !== prev[key]) {
      console.log('not equal', key);
      return false;
    }
  }

  console.log('props did not change')
  return true;
}

export default React.memo(CategoryTable, areEqual);

我已验证除了更改的表之外，每个表都返回 true。所以只有一个表应该重新渲染，而不是全部 10 个，对吗？错误的。这是我的火焰图：

我的表格组件的名称是 CategoryTable。如您所见，CategoryTable（备忘录）是灰色的，但随后的 CategoryTable 是绿色的，并且呈现为其所有子项。我已经通过在 CategoryTable 组件中放置一个 console.log 来确认每个类别表都在呈现。

如何真正阻止此组件重新渲染？ react.memo 是否也停止渲染树中下面的所有组件或仅停止包装组件？

Answer 1

如果值没有改变，React.memo 返回缓存它真的有用，但在你的情况下，你可以尝试 pureComponent，如果子组件的道具没有改变，它会阻止渲染子组件