useRef用法与ref持久化技巧

在React的JavaScript开发中，`useRef`是一个强大的Hook，它提供了一种在组件多次渲染之间保持不变的可变容器。本文深入探讨了`useRef`的内部机制，揭示了它如何通过将对象绑定到组件的内部节点来实现跨渲染的持久存储。与`useState`不同，修改`useRef`的`.current`属性不会触发组件重新渲染，使其成为存储DOM引用、计时器ID以及其他非UI状态数据的理想选择。文章还介绍了`useRef`在存储上一次的值、可变实例以及组件生命周期状态等方面的妙用，并通过实例代码展示了如何在实际开发中灵活运用`useRef`来解决各种问题，提升React应用的性能和可维护性。

useRef能持久化是因为它返回的对象在组件实例的生命周期内始终保持同一引用，React通过将该对象绑定到组件的内部节点（如Fiber节点）实现跨渲染的持久存储，每次调用useRef都返回同一实例，确保.current值在多次渲染间不变且修改不触发重渲染。

useRef在JavaScript（尤其是在React这类前端框架的语境下）的实现，核心在于它提供了一个在组件多次渲染之间保持不变的、可变的容器。它不是通过什么复杂的响应式系统来追踪变化，而仅仅是给你一个普通的对象，这个对象在组件的整个生命周期内都是同一个实例，并且它的.current属性可以被随意修改，而不会触发组件的重新渲染。你可以把它想象成一个组件内部的“私有储物柜”，你放进去的东西，下次渲染时还在那里，不会因为组件更新而消失或重置。

本质上，useRef的核心在于它返回一个普通JavaScript对象，这个对象拥有一个current属性。关键在于，无论组件重新渲染多少次，useRef每次都会返回同一个对象实例。它不是通过什么魔法实现持久化的，而是在React（或其他类似框架）的内部机制中，将这个特定的引用对象与组件的特定实例（或者说，与组件在渲染树中的位置）绑定起来了。当你第一次调用useRef(initialValue)时，框架会创建一个{ current: initialValue }这样的对象并存储起来。后续的渲染中，当同一个组件再次调用useRef时，框架会检查是否已经为这个组件实例存储了一个引用对象，如果有，就直接返回那个已经存在的对象，而不是重新创建一个。这确保了current属性即使在组件外部被修改，其状态也能在不同渲染周期中保持一致，且不会触发组件重新渲染。

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 (
    <div>
      <p>当前值: {value}</p>
      <p>上一个值: {prevValue !== undefined ? prevValue : '无'}</p>
    </div>
  );
}

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

另一个妙用是存储可变的实例或计时器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 <div>查看控制台，我正在计时...</div>;
}

这种方式确保了计时器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 <div>模拟异步数据获取...</div>;
}

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

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