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

临时备忘录

memo自组织只对传递的道具进行简单的浅层引用相等检查。您可以指定一个相等函数作为memo HOC的第二个参数，如果比较返回相同的结果，则使用返回true的上一个和下一个道具，否则为false。

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