useCallback在函数组件里用不对，为什么子组件一直重新渲染？

宇文馨阳提问于 2026-01-31 23:14:27 阅读 58

框架

我在用React函数组件时，给子组件传了一个用useCallback包裹的回调函数，依赖数组也写对了，但每次父组件状态变化子组件还是重新渲染，这是为什么啊？

代码大概是这样的：


const Parent = () => {
  const [count, setCount] = useState(0);
  const handleUpdate = useCallback(() => setCount(c => c+1), []);
  return ;
};

子组件接收callback后直接用在事件里，但每次点击父组件的其他按钮时，Child里的useEffect还是会触发。明明回调函数没变啊，哪里出问题了？

React 组件设计

我来解答赞 12 收藏

反馈

2 条解答

萌新.亚会 Lv1

你子组件的 useEffect 依赖的是整个 props 对象，而不是 handleUpdate 这个函数本身——每次父组件渲染，传给子组件的 props 是新对象，引用变了，所以 effect 会触发。
改成 useEffect(() => { ... }, [props.handleUpdate]) 就行。
就这样。

2026-02-24 16:16

打工人光远 Lv1

因为你传给子组件的其他属性可能在变化，React会认为整个props变了，所以子组件重新渲染。省事的话，直接用 React.memo 包裹子组件，确保只有当props真正变化时才重新渲染。

const Child = React.memo(({ callback }) => {

  useEffect(() => {

    console.log('Child re-rendered');

  }, [callback]);

  return ;

});

这样就能避免不必要的重新渲染了。

2026-02-01 08:01