React传递函数作为Prop引发无限循环，求排查解决方法

兄弟，我太懂这种无限循环的崩溃感了！之前我也踩过一模一样的坑，给你分享几个我亲测有效的排查思路和替代方案，帮你快速搞定这个问题：

一、先排查父组件的几个常见问题点 #

• 检查传递给子组件的函数是否每次渲染都重新创建：如果你是直接在子组件标签里写内联箭头函数（比如 <Child onAction={() => updateState()} />），那每次父组件渲染时，这个函数都会生成一个新的引用。如果子组件里用了这个函数作为 useEffect、useMemo 的依赖，或者子组件用 React.memo 但没处理函数引用，就会触发子组件重新渲染，进而导致父组件再渲染，形成循环。
• 确认函数是否触发了父组件的状态更新连锁反应：比如子组件调用父函数后，父组件直接更新了某个状态，而这个状态又刚好是父组件里创建那个传递函数的依赖，导致函数重新生成，子组件再调用，循环往复。
• 检查父组件钩子的依赖数组：如果父组件里的 useEffect、useCallback 等钩子依赖了这个传递给子组件的函数，而函数本身没有被缓存，就会导致钩子反复执行，触发组件无限更新。

二、靠谱的替代实现方式 #

1. 用 useCallback 缓存函数引用 #

这是最常用的解决方案，通过 useCallback 把函数缓存起来，只有当依赖数组里的变量变化时，才会重新生成函数引用。示例：

import { useCallback, useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  // 用 useCallback 缓存函数，依赖数组里放真正需要的变量
  const handleChildClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, [setCount]); // setCount 是 useState 返回的稳定函数，不会变

  return <Child onClick={handleChildClick} />;
}

这样传递给子组件的 handleChildClick 引用是稳定的，不会每次父组件渲染都变，从根源上避免循环。

2. 用 useRef 保存函数引用（适合无依赖或特殊场景） #

如果你的函数逻辑不需要依赖组件的状态/ props，或者想跳过依赖检查，可以用 useRef 来保存函数的最新引用。示例：

import { useRef, useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  const handleActionRef = useRef();

  // 每次渲染都更新 ref 的 current，确保拿到最新的函数逻辑
  handleActionRef.current = () => {
    setCount(prev => prev + 1);
  };

  return <Child onAction={handleActionRef.current} />;
}

注意：这种方式下，如果函数里用到的状态需要是最新值，一定要确保 ref.current 每次渲染都更新，不然可能拿到旧的状态。

3. 避免内联传递函数 #

不要直接在子组件的 props 里写内联函数，提前在父组件里定义好缓存后的函数再传递，这样能最大程度保证引用稳定。

4. 配合 React.memo 优化子组件 #

如果子组件是纯组件，可以用 React.memo 包裹子组件，这样只有当 props 真正变化时，子组件才会重新渲染。结合 useCallback 一起用，效果更佳：

const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>点击我</button>;
});

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