功能組件中的 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;
  },
);