React传递对象Prop至子组件时使用React.memo仍异常重渲染问题

React.memo 默认会对组件接收的所有props做浅比较，只要任意一个prop的引用发生变化，就会触发子组件重渲染。
你虽然用useCallback缓存了handleClick的引用，但父组件每次渲染时，传给Button组件的deneme属性都是直接字面量生成的新对象：

<Button
  deneme={{ aaa: "aaa", bbb: "bbb" }} // 每次父组件渲染都会生成新的对象，引用发生变化
  handleClick={handleClick}
></Button>

浅比较时检测到deneme的引用变化，所以会触发子组件重渲染。

根据你的业务场景选择任意一种即可：

• 方案1：删除无用的deneme属性
  你当前的Button组件并没有用到deneme属性，直接移除父组件中传给Button的deneme参数即可解决问题。
  修改后父组件返回部分代码：

  return (
    <div>
      <p>{count}</p>
      <Button handleClick={handleClick}></Button>
    </div>
  );
  

• 方案2：用useMemo缓存deneme对象
  如果业务中需要用到deneme属性，可以用useMemo缓存该对象，避免每次渲染生成新引用：

  // 父组件内新增
  const deneme = useMemo(() => ({ aaa: "aaa", bbb: "bbb" }), []);
  
  // 传参时使用缓存后的对象
  <Button
    deneme={deneme}
    handleClick={handleClick}
  ></Button>
  

• 方案3：自定义React.memo的比较规则
  如果你确定只需要根据特定prop判断是否需要重渲染，可以给React.memo传入第二个自定义比较函数，返回true表示props无变化不需要重渲染，返回false表示需要重渲染：

  // Button.jsx 修改导出逻辑
  export default React.memo(Button, (prevProps, nextProps) => {
    // 仅比较handleClick的引用是否变化
    return prevProps.handleClick === nextProps.handleClick;
  });
  

内容的提问来源于stack exchange，提问作者Mümin ZEHİR