useRef 获取不到最新 state 值是怎么回事？

艺诺的笔记提问于 2026-03-16 22:17:22 阅读 4

框架

我在用 useRef 保存一个 DOM 元素，同时也在 useEffect 里想读取当前的 count 状态，但发现 ref 里的值总是旧的。明明 count 已经变了，为什么 ref.current 还是上一次的值？是不是 useRef 不能直接存状态啊？

我试过把 count 放进依赖数组，也试过在 setCount 后手动更新 ref，但都不太对劲。下面是我的代码：

import { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    // 想在这里拿到最新的 count
    console.log('ref current:', countRef.current); // 总是打印旧值
  }, []);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

我来解答赞 3 收藏

反馈

1 条解答

Mr.润恺 Lv1

你这个问题挺典型的，useRef 和 state 根本不是一回事，别混为一谈。

根本原因：useRef 初始化时拿到的值就是初始值，之后不会因为 state 变化而自动更新。它只在你手动赋值 ref.current 时才会变。

看你的代码：

const countRef = useRef(count); // 这里 count 是 0，ref.current 就永远是 0

这行代码只在首次渲染时执行一次，之后 count 怎么变，ref 都不会自动同步。

解决方法很简单：

如果你想在 useEffect 里拿到最新的 count，把 count 放进依赖数组就行：

useEffect(() => {

  console.log('count:', count); // 每次 count 变化都会打印最新值

}, [count]);

这就是最直接的用法，别想着用 ref 来"监听" state，不是一套东西。

如果你确实需要用 ref 存一个会变的值，那就手动更新：

const countRef = useRef(0);



useEffect(() => {

  countRef.current = count; // 每次渲染后同步最新值

}, [count]);

但说实话，这种场景直接用依赖数组更简洁，除非你是为了某些性能优化或者需要在上一个 render 周期保留值。

总结一下：useRef 是用来存 DOM 节点或者那些不需要触发重新渲染的可变数据的，state 变化想拿到最新值就用 useEffect 依赖数组，别挣扎着用 ref 去搞。

2026-03-17 11:08