当前位置：首页 > 文章列表 > 文章 > 前端 > useRef用法与ref持久化技巧

useRef用法与ref持久化技巧

2025-11-30 09:47:33 0浏览收藏

`useRef`为什么能持久化？它的内部机制是怎样的？

useRef能够持久化的秘密，其实藏在前端框架（比如React）的内部调度和状态管理机制里。当一个组件首次被渲染时，框架会为它创建一个内部的“实例”或者说“纤维（Fiber）”节点。这个节点就像是组件在内存中的一个代表，它会存储组件的所有内部状态、副作用以及，没错，就是useRef创建的那些引用对象。

当你第一次在组件里调用useRef(initialValue)时，React会识别到这个调用，然后它会为当前的组件实例生成一个形如{ current: initialValue }的普通JavaScript对象，并把这个对象“挂载”到组件对应的那个内部节点上。你可以把这个内部节点想象成一个组件的“背包”，useRef创建的对象就被放进了这个背包里。

接下来，无论你的组件因为什么原因（比如父组件重渲染、自身状态改变）而重新渲染，React在执行组件函数时，会再次遇到useRef的调用。这时候，React并不会傻乎乎地再创建一个新对象。它会聪明地检查当前组件的“背包”里，是不是已经有一个之前存进去的useRef对象了。如果找到了，它就会直接把那个旧的、已经存在的对象返回给你。

正是这种“首次创建，后续复用”的策略，确保了useRef返回的永远是同一个对象实例。它的current属性虽然可以被修改，但这种修改并不会被React的响应式系统追踪，所以它不会像useState那样触发组件的重新渲染。这就像你有一个私人的笔记本，你在上面写写画画，但没人会因此而大声宣布“笔记本内容变了，快来看！”。

`useRef`与`useState`有什么本质区别？何时应该选择它们？

这俩兄弟在表面上看起来都是用来“存东西”的，但骨子里却完全不同，用错了地方可能就是灾难。

useState是用来管理组件的“状态”的。这里的“状态”指的是那些会影响组件渲染结果、需要被UI响应式地追踪和更新的数据。当你通过useState更新一个值时，React会知道这个值变了，然后它会重新渲染组件，让UI反映出最新的状态。它就像一个公共的布告栏，上面贴着最新的信息，信息一变，大家就都知道了。

而useRef，正如前面所说，它提供的是一个“持久化的、可变的容器”。它的核心特点是：修改.current属性不会触发组件重新渲染。它更像是一个组件内部的“私人物品”，你可以在里面放任何东西，比如DOM元素的引用、一个计时器ID、一个WebSocket实例，或者任何你希望在多次渲染之间保持不变但又不需要触发UI更新的数据。

选择时机：

选择useState：
- 当你的数据变化需要直接反映在用户界面上时（比如用户输入、数据加载状态、一个开关的开启/关闭）。
- 你需要通过某种方式（比如表单提交、按钮点击）来“设置”这个值，并且希望UI能立即响应。
- 数据是组件渲染逻辑的直接输入。
选择useRef：
- 你需要直接操作DOM元素（比如获取输入框的焦点、播放/暂停视频）。
- 你需要存储一个在组件生命周期内保持不变的引用，但这个引用值的改变不应该触发组件重新渲染（比如计时器ID、第三方库的实例、WebSocket连接）。
- 你需要在多次渲染之间“记住”某个值，但这个值本身不是UI的状态（比如上一次渲染的值、一个计算结果的缓存）。
- 你想要存储一个可变的对象，并且希望在不触发重渲染的情况下修改它。

简单来说，如果数据的变化需要“告诉”用户界面，那就用useState；如果数据只是组件内部的“私事”，或者它是一个需要直接操作的“引用”，那就用useRef。我个人觉得，很多时候新手容易混淆，但只要记住“是否需要触发重渲染”这个核心判断点，就能少走很多弯路。

除了DOM引用，`useRef`还有哪些不为人知的妙用？

useRef的功能远不止于获取DOM引用，它的“持久化”特性让它在很多场景下都非常有用，甚至能解决一些看似棘手的问题。

一个很常见的场景是存储上一次的值（Previous Value）。假设你想知道一个prop或者state在当前渲染周期中，它的上一个值是什么。你不能直接用一个普通变量去存，因为普通变量在每次组件渲染时都会重新初始化。这时候useRef就派上用场了：

function MyComponent({ value }) {
  const prevValueRef = useRef(); // 创建一个ref来存储上一个值

  useEffect(() => {
    // 在effect中更新ref的current属性，因为它会在渲染之后执行
    prevValueRef.current = value;
  }, [value]); // 只有当value变化时才执行

  // 现在你可以随时访问 prevValueRef.current 来获取上一个值了
  const prevValue = prevValueRef.current;

  // ... 你的组件逻辑
  return (
    
      当前值: {value}
      上一个值: {prevValue !== undefined ? prevValue : '无'}
    
  );
}

这种模式在处理动画、数据比较或者某些复杂的副作用逻辑时非常有用。

另一个妙用是存储可变的实例或计时器ID。比如，你可能需要在组件挂载时启动一个setInterval，在组件卸载时清除它。setInterval返回的ID需要被“记住”，以便在清理函数中引用。

function TimerComponent() {
  const intervalRef = useRef(null); // 用ref来存储计时器ID

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      console.log('计时器在运行...');
    }, 1000);

    return () => {
      // 组件卸载时清除计时器
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []); // 空依赖数组表示只在挂载和卸载时执行

  return 查看控制台，我正在计时...;
}

这种方式确保了计时器ID在组件的整个生命周期内都是可访问的，并且可以在清理函数中正确使用。

我个人还喜欢用useRef来存储一些不需要响应式更新的“状态”或“标志”。比如，你可能想知道一个组件是否已经挂载（isMounted标志），或者一个异步操作是否正在进行中，但这些信息并不需要直接触发UI更新，只是作为内部逻辑判断的依据。

function AsyncDataFetcher() {
  const isMounted = useRef(false); // 存储组件是否挂载的标志

  useEffect(() => {
    isMounted.current = true; // 组件挂载时设置为true

    // 模拟数据请求
    const fetchData = async () => {
      // ... 假设这里有一些异步操作
      await new Promise(resolve => setTimeout(resolve, 2000));
      if (isMounted.current) { // 在更新状态前检查组件是否仍然挂载
        console.log("数据已获取，组件仍在挂载");
        // setState(...)
      } else {
        console.log("数据已获取，但组件已卸载，不再更新状态");
      }
    };

    fetchData();

    return () => {
      isMounted.current = false; // 组件卸载时设置为false
    };
  }, []);

  return 模拟异步数据获取...;
}

这个isMounted的模式在处理异步操作时特别有用，可以避免在组件已经卸载后尝试更新状态，从而防止内存泄漏或意外行为。它提供了一种简洁而有效的方式来管理组件的生命周期状态，而无需引入额外的useState和不必要的渲染。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《useRef用法与ref持久化技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。