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

memo HOC

memo HOC只是对传递的props进行浅引用相等检查。您可以将相等函数指定为memo HOC的第二个参数，如果比较将返回相同的结果，则该函数采用返回true的前一个和下一个道具，否则返回false。

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

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

1 个答案: