如何在React.js中对嵌套函数进行记忆化处理？

你遇到的问题核心是：useCallback只记忆了外层的handleChange函数，但在Test组件中调用handleChange(rowData)时，每次渲染都会生成全新的内层函数，导致OtherComp接收的handleChange props引用始终变化，React.memo自然无法起到优化作用。

下面提供几种实用的解决思路：

方法一：将参数下移到内层组件生成回调 #

把rowData作为props直接传给OtherComp，在内层组件里再结合handleChange生成最终回调。这样传递给OtherComp的handleChange是来自App的稳定引用，只要rowData本身不变，React.memo就能生效。

修改后的代码示例：

const App = React.memo(() => {
  const handleChange = useCallback((rowData) => (option) => {
    // 原逻辑
  }, []);
  return <Test data={data} handleChange={handleChange} />;
});

const Test = React.memo(({ data, handleChange }) => {
  return (
    <div>
      {data.map((rowData) => (
        <OtherComp key={rowData.id} rowData={rowData} handleChange={handleChange} />
      ))}
    </div>
  );
});

const OtherComp = React.memo(({ rowData, handleChange }) => {
  // 在内层记忆化最终回调
  const memoizedHandle = useCallback((option) => {
    handleChange(rowData)(option);
  }, [handleChange, rowData]);

  // 使用memoizedHandle作为回调
  return <button onClick={memoizedHandle}>操作</button>;
});

方法二：在Test组件中对每个rowData的回调单独记忆化 #

在Test组件遍历data时，用useCallback为每个rowData生成稳定的回调引用，依赖项包含handleChange和rowData，确保同一rowData对应的回调引用不变。

代码示例：

const App = React.memo(() => {
  const handleChange = useCallback((rowData) => (option) => {
    // 原逻辑
  }, []);
  return <Test data={data} handleChange={handleChange} />;
});

const Test = React.memo(({ data, handleChange }) => {
  return (
    <div>
      {data.map((rowData) => {
        // 为每个rowData生成记忆化的回调
        const memoizedHandle = useCallback(
          handleChange(rowData),
          [handleChange, rowData]
        );
        return <OtherComp key={rowData.id} handleChange={memoizedHandle} />;
      })}
    </div>
  );
});

const OtherComp = React.memo(({ handleChange }) => {
  return <button onClick={handleChange}>操作</button>;
});

注意：如果rowData是对象类型，要确保它的引用稳定（比如data本身是经过useMemo处理的，或者rowData是不可变数据），否则依赖项变化会导致回调重新生成。

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