如何避免React中memo包装的子组件因对象props更新重渲染？

你的问题核心是React.memo默认做浅比较，而你传递的handleClose函数、first对象每次父组件渲染都会生成新的引用，导致memo判定props变化，触发子组件重渲染。下面是具体的解决办法：

1. 稳定函数props的引用 #

用useCallback包裹handleClose，确保只有当依赖项变化时才重新生成函数引用：

import { useCallback } from 'react';

// 父组件内
const handleClose = useCallback(() => {
  // 你的关闭逻辑
}, []); // 这里添加函数依赖，比如用到setShow就把它放进依赖数组

2. 稳定对象props的引用 #

方式一：用useMemo包裹对象 #

更新first时，用useMemo确保只有当依赖变化时才创建新对象：

import { useMemo } from 'react';

// 父组件内
const handleClick = () => {
  const newFirst = useMemo(() => ({ id: 123 }), []);
  setfirst(newFirst);
};

方式二：直接传递对象的具体属性 #

如果子组件只用到first里的某个属性（比如id），没必要传递整个对象，直接传对应属性就能避免引用类型的问题：

<MemoModalWindow show={show} handleClose={handleClose} rowId={first?.id} />

3. 自定义memo的比较函数（不推荐） #

如果必须传递整个对象且需要深比较，可以给memo传入第二个参数自定义比较逻辑，但这种方式会增加性能开销，除非必要不建议用：

import { memo } from 'react';

const arePropsEqual = (prevProps, nextProps) => {
  // 自定义比较逻辑，比如深比较rowValue
  return prevProps.show === nextProps.show &&
         prevProps.rowValue.id === nextProps.rowValue.id;
};

const MemoModalWindow = memo(ModalWindow, arePropsEqual);

内容的提问来源于stack exchange，提问作者Romio