如何向使用Hooks的组件传递箭头函数props，避免不必要的useEffect触发？

这个问题本质上是因为每次父组件渲染时传递的箭头函数都是一个全新的引用，导致子组件useEffect的依赖cb每次都变化，进而重复触发effect。下面给你几个更优雅的解决方案，比单纯用useRef更符合React的设计思路：

1. 父组件用useCallback缓存回调函数 #

如果你的回调逻辑不需要频繁变化，在父组件中用useCallback包裹传递给子组件的箭头函数，就能稳定它的引用：

// 父组件代码
function Parent() {
  // 用useCallback缓存回调，依赖数组为空时只会创建一次函数引用
  const handleFetchResult = useCallback((result) => {
    // 这里写你的回调逻辑，比如更新父组件状态
    console.log('Fetch结果:', result);
  }, []); // 若回调依赖父组件的状态/ props，把它们加入依赖数组即可

  return <Apple text="我是苹果组件" cb={handleFetchResult} />;
}

子组件的代码保持不变：

function Apple(props) {
  const { text, cb } = props;
  useEffect(() => {
    pretendFetch().then(result => cb(result));
  }, [cb]); // 现在cb的引用稳定了，effect只会执行一次（除非父组件的依赖变化）
  
  return <div>{text}</div>;
}

为什么有效？
useCallback会缓存函数的引用，只有当依赖数组中的变量发生变化时，才会生成新的函数。这样子组件接收的cb引用不再随父组件渲染而变化，useEffect自然只会触发一次。

2. 用useReducer传递稳定的dispatch #

如果回调涉及复杂的状态更新，或者你不想依赖useCallback的依赖数组，可以用useReducer来重构：

// 父组件中定义reducer和状态
const initialState = { fetchData: null };
function dataReducer(state, action) {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, fetchData: action.payload };
    default:
      return state;
  }
}

function Parent() {
  const [state, dispatch] = useReducer(dataReducer, initialState);

  // 直接传递dispatch给子组件，dispatch的引用永远稳定
  return <Apple text="我是苹果组件" dispatch={dispatch} />;
}

子组件调整为直接使用dispatch：

function Apple(props) {
  const { text, dispatch } = props;
  useEffect(() => {
    pretendFetch().then(result => {
      // 用dispatch触发状态更新，无需传递回调函数
      dispatch({ type: 'FETCH_SUCCESS', payload: result });
    });
  }, [dispatch]); // dispatch引用稳定，effect只执行一次
  
  return <div>{text}</div>;
}

为什么有效？
useReducer返回的dispatch函数引用在组件整个生命周期中都不会改变，所以子组件的useEffect依赖dispatch时，只会触发一次effect，同时还能通过dispatch完成原本回调要做的状态更新逻辑。

3. 用useRef存储最新回调（官方推荐的备选方案） #

你提到觉得useRef是权宜之计，但其实这是React官方文档明确推荐的、用于“需要访问最新props/回调但不想触发effect”场景的方案，我们可以把它写得更清晰：

function Apple(props) {
  const { text, cb } = props;
  // 用ref存储最新的回调引用
  const latestCb = useRef(cb);

  // 每次组件渲染时更新ref，确保里面总是最新的cb
  useEffect(() => {
    latestCb.current = cb;
  }, [cb]);

  // 这个effect只执行一次，调用最新的回调
  useEffect(() => {
    pretendFetch().then(result => {
      latestCb.current(result);
    });
  }, []); // 依赖为空，仅执行一次
  
  return <div>{text}</div>;
}

这个方案的好处是既保证了effect只执行一次，又能调用到最新的回调函数，同时不会触发ESLint警告（因为第一个effect已经正确依赖了cb）。如果你确实需要传递动态变化的回调，但又只想执行一次fetch，这个方案其实是很合理的。

总结一下优先级：优先用useCallback（适合简单回调），其次用useReducer（适合复杂状态管理），最后用useRef方案（适合动态回调但需单次effect的场景）。

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