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 重新计算？

这感觉像是 deep/shallow 复制问题，但我不确定。

Answer 1

memo HOC

memo HOC 只是对传递的 props 进行浅层引用相等性检查。您可以指定一个等式函数作为 memo HOC 的第二个参数，如果比较 return 相同的结果，它采用 returns true 的前一个和下一个道具, 否则为假。

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

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

React.memo and invalidation in Functional component not invalidating

reactjs

react-functional-component

react-memo