功能组件中的 React.memo 和失效不会失效

Question

我有一个用 React.memo 包装的 React 功能组件，如下所示

const SpeakerDetail = React.memo(
  ({ record, prop1 }) => {...

当我调用这个组件时，我会这样做

const record = {prop1: 'abcd', prop2: 'efgh', prop3: 'ijkl'};
const Speakers = () => {
   ...
   return(
      <SpeakerDetail record={record} prop1={record.prop1}></SpeakerDetail>
   )...

假设我的 prop1 在渲染之间确实发生了变化，上面的代码按预期工作，这意味着 React.memo 创建了一个新副本并且不使用它的缓存版本。

问题是如果我没有明确地将 prop1 作为单独的参数传递，React.memo 缓存版本不会识别记录的属性已更改。

有没有办法不必传入这个冗余属性来让 React.memo 重新计算？

这感觉像是一个深/浅的复制问题，但我不确定。

Answer 1

备忘录 HOC

memo HOC 只是对传递的 props 进行浅层引用相等性检查。 您可以指定相等 function 作为memo HOC 的第二个参数，如果比较将返回相同的结果，则返回true的上一个和下一个属性，否则返回 false。

const SpeakerDetail = React.memo(
  ({ record, prop1 }) => {...},
  (prevProps, nextProps) => {
    if (prevProps.record.prop1 !== nextProps.record.prop1) return false;
    return true;
  },
);