useState状态管理核心 Hook【二】

贺公子之数据科学与艺术

发布于 2025-12-18 08:33:50

960

useCallback：缓存回调函数

在函数组件中，每次渲染都会重新定义内部函数，导致不必要的性能开销。useCallback 用于缓存回调函数，仅在依赖项变化时重新创建。

const handleIncrement = useCallback(
  () => setCount(count + 1),
  [count] // 依赖项
);

useMemo：缓存计算结果

useMemo 用于缓存计算结果，避免重复计算。适用于依赖项未变化时的复杂计算场景。

const filteredUsers = useMemo(
  () => users.filter(user => user.name.includes(searchKey)),
  [users, searchKey] // 依赖项
);

useRef：共享跨渲染数据

useRef 用于在多次渲染间共享数据，常用于保存 DOM 引用或计时器 ID 等。

const timerRef = useRef(null); // 初始化
timerRef.current = setInterval(() => {}, 1000); // 赋值
clearInterval(timerRef.current); // 使用

useContext：跨组件共享状态

useContext 用于在组件树中共享状态，避免逐层传递 props。需配合 React.createContext 使用。

const ThemeContext = React.createContext('light'); // 创建 Context
const theme = useContext(ThemeContext); // 消费 Context

综合示例：计时器组件

结合 useRef 和 useState 实现计时器功能：

function Timer() {
  const [count, setCount] = useState(0);
  const timerRef = useRef(null);

  const start = () => {
    timerRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
  };

  const pause = () => {
    clearInterval(timerRef.current);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
    </div>
  );
}