使用空数组的useCallback为何仍导致React组件重渲染？

首先明确：useCallback的作用是缓存函数引用，避免子组件因为函数依赖变化而触发不必要的重渲染，但它完全管不了组件自身的重渲染逻辑。

你遇到的第二次点击按钮时App仍打印App is re-rendering的情况，核心原因是：App组件自身的状态（比如你代码里的count这类变量）在每次点击时被更新了。React的默认机制就是：只要组件的state或者props发生变化，组件就会重新执行并渲染，这是正常的流程，和useCallback没关系。

举个你代码里可能的场景例子：

import { useState, useCallback } from 'react';

function ChildBtn({ handleClick }) {
  return <button onClick={handleClick}>点击测试</button>;
}

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

  // useCallback缓存了这个函数的引用
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  console.log('App is re-rendering');
  return <ChildBtn handleClick={handleClick} />;
}

这里每次点击按钮，count都会被更新，App的state变了，自然会触发重渲染打印日志。useCallback在这里只保证handleClick的引用不会每次都变，所以ChildBtn组件不会因为函数变化而重渲染，但App自身的重渲染是state更新导致的，完全是正常现象。

如果真的想避免App的重渲染（一般除非有严重性能问题才需要这么做），你得把状态拆分到子组件里，或者结合memo和状态管理做进一步优化，但这已经超出useCallback的职责范围了。

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