如何使用 React 內置的 React.memo 對比 function？

Question

我想檢查某個 prop 是否手動更改，然后對其他 prop 使用 React 的內置比較 function。 例如：

React.memo(
  () => <div />,
  (prevProps, nextProps) => {
    if (!nextProps.visible) {
      return true;
    }
    return React.shallowCompare(prevProps, nextProps);
  },
);

我可以輕松地編寫自己的比較 function 或從 React 的源代碼復制/粘貼，但如果 React 更改其默認比較 function 那么我也必須手動更改我的 ZC1C425268E68385D1AB5074F414 有沒有辦法將 React 的內置比較 function 用於React.memo ？

此外，AFAIK， react-addons-shallow-compare已過時。

Answer 1

抱歉不行。 如果您不提供比較 function，React 默認為shallowEqual ，但是如果您返回任何特殊的東西（例如return null ），則沒有使用默認行為的額外邏輯。

React 的用法：

const prevProps = currentChild.memoizedProps;
// Default to shallow comparison
let compare = Component.compare;
compare = compare !== null ? compare : shallowEqual;
if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
...

React 目前沒有導出shallowEqual 。 但是， React 的文檔指出它只是淺比較，這不太可能發生太大變化，並且可以像您所知的那樣輕松實現（示例）。 我假設這個決定是為了減少他們的團隊向開發人員公開的 API。