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

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

框架

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

代码大概是这样的：


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

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

React 组件设计

我来解答赞 6 收藏

反馈

1 条解答

打工人光远 Lv1

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

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

  useEffect(() => {

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

  }, [callback]);

  return ;

});

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

2026-02-01 08:01