React忽略浅层比较中的一个属性,或访问默认React shallowCompare for反应备忘录

下面是我的解决方案:(1)对于您尝试进行深度比较的道具,您可以为其编写单独的逻辑;(2)对于其余的道具,使用React已经为浅层比较编写的相同逻辑。请看下面我的源代码以及其中的注释,以了解更多信息

const CustomComponent = React.memo(
  (props) => {
    React.useEffect(() => {
      console.log("CustomComponent render");
    });

    return "";
  },
  (prevProps, nextProps) => {
    // destructure the prop you want to specifically target for deep comparison
    // the rest will be shallow compared
    const { deepCompareThis: prevDeep, ...prevRest } = prevProps;
    const { deepCompareThis: nextDeep, ...nextRest } = nextProps;

    // your custom logic for the deep comparison
    // i took this function from https://stackoverflow.com/a/16436975/8680805
    function arraysEqual(a, b) {
      if (a === b) return true;
      if (a == null || b == null) return false;
      if (a.length !== b.length) return false;

      for (var i = 0; i < a.length; ++i) {
        if (a[i] !== b[i]) return false;
      }
      return true;
    }

    const deep_comparison_result = arraysEqual(prevDeep, nextDeep);
    console.log(`deep comparison`, deep_comparison_result);

    // use same logic provided by reeact for shallow comparison
    // from https://github.com/facebook/react/blob/master/packages/shared/shallowEqual.js
    const shallow_comparison_result = shallowEqual(prevRest, nextRest);
    console.log(`shallow comparison`, shallow_comparison_result);

    return deep_comparison_result && shallow_comparison_result;
  }
);

功能部件不应该使用 useMemo

我不确定你想达到什么目的:深入比较以避免虚假的重新渲染?