React函数式父组件传递函数给memo子组件以避免不必要重渲染的方案咨询

你观察得特别到位！函数式组件每次重新渲染时，内部定义的所有函数——不管是箭头函数还是普通函数——都会被重新创建，生成全新的引用。而memo默认是对组件props做浅比较，一旦函数引用变了，浅比较就会判定props发生了变化，进而触发子组件重渲染。

反观类组件，如果你把事件处理函数定义为类属性箭头函数（或者在constructor里手动绑定实例），这个函数会直接绑定到组件实例上，每次调用render时传递给子组件的都是同一个引用，所以memo能正常发挥作用，避免不必要重渲染。

接下来给你几个实用的解决方案，帮你在函数式父组件里传递函数时，让memo子组件不再无故重渲染：

1. 使用useCallback缓存函数引用（最常用方案） #

useCallback就是专门用来缓存函数引用的Hook，只有当依赖数组里的变量发生变化时，它才会生成新的函数引用。结合函数式状态更新，还能避免依赖组件内部的状态变量，进一步稳定函数引用。

示例代码：

import { memo, useState, useCallback } from 'react';

// 用memo包裹的子组件
const MemoizedButton = memo(({ onClick, label }) => {
  console.log(`Rendering ${label} button`);
  return <button onClick={onClick}>{label}</button>;
});

const ParentFunctionalComponent = () => {
  const [count, setCount] = useState(0);

  // 用useCallback缓存函数，依赖数组为空，函数引用始终稳定
  const optimizedIncrement = useCallback(() => {
    // 函数式更新：直接使用前一次状态计算新值，无需依赖count变量
    setCount(prevCount => prevCount + 1);
  }, []);

  // 如果函数需要用到其他变量，把变量加入依赖数组即可
  const incrementWithDependency = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count变化时，才会生成新的函数引用

  return (
    <div>
      <p>Count: {count}</p>
      <MemoizedButton onClick={optimizedIncrement} label="UseCallback 优化按钮" />
      <MemoizedButton onClick={incrementWithDependency} label="带依赖的优化按钮" />
    </div>
  );
};

2. 用useReducer封装状态更新逻辑 #

useReducer返回的dispatch函数引用在整个组件生命周期内是完全稳定的，把dispatch传递给memo子组件后，浅比较会判定props没有变化，子组件就不会无故重渲染。适合状态更新逻辑复杂的场景。

示例代码：

import { memo, useReducer } from 'react';

// 定义reducer处理状态更新
const countReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const MemoizedButton = memo(({ dispatch, label }) => {
  console.log(`Rendering ${label} button`);
  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>{label}</button>;
});

const ParentFunctionalComponent = () => {
  const [state, dispatch] = useReducer(countReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <MemoizedButton dispatch={dispatch} label="UseReducer 优化按钮" />
    </div>
  );
};

3. 将无依赖函数移到组件外部 #

如果你的函数不需要访问组件内部的state、props或其他Hook，可以直接把它定义在组件外部，这样它的引用永远不会变化。如果需要调用组件内的setter函数，配合useCallback使用即可：

示例代码：

import { memo, useState, useCallback } from 'react';

// 定义在组件外部，引用永久稳定
const externalIncrement = (setCount) => {
  setCount(prev => prev + 1);
};

const MemoizedButton = memo(({ onClick, label }) => {
  console.log(`Rendering ${label} button`);
  return <button onClick={onClick}>{label}</button>;
});

const ParentFunctionalComponent = () => {
  const [count, setCount] = useState(0);

  // 用useCallback包裹调用外部函数的逻辑，setCount引用稳定，依赖数组可留空
  const handleClick = useCallback(() => {
    externalIncrement(setCount);
  }, [setCount]);

  return (
    <div>
      <p>Count: {count}</p>
      <MemoizedButton onClick={handleClick} label="外部函数优化按钮" />
    </div>
  );
};

总结一下，最通用的方案是useCallback结合函数式状态更新，大部分场景下都能解决问题；如果状态逻辑复杂，useReducer会是更清晰的选择。

备注：内容来源于stack exchange，提问作者Arst