如何理解 React 中的 useRef

2023-11-07 10:47:04

揭秘 React 的 useRef：管理状态而无需重新渲染

引言

在 React 的世界中，useRef 是一个不可或缺的 Hook，它让我们可以从容自若地管理组件状态，而无需担心重新渲染带来的不便。它就像一位默默无闻的幕后英雄，在不引起喧嚣的情况下完成使命，为我们提供一种存储可变值的神奇途径。

useRef vs. useState：相辅相成的双胞胎

在 React 组件中，useRef 与 useState 这两位小伙伴各司其职。useState 负责掌管组件状态，一旦状态值改变，它就会发出号令，触发组件重新渲染。而 useRef 则扮演着更沉稳的角色，悄然存储可变值，无论组件如何变化，它都能泰然自若，不动声色。

useRef 的作用

useRef 的用途可谓广泛，它能胜任各种任务，其中最常见的包括：

存储 DOM 节点： 想要与 DOM 节点亲密接触？useRef 帮你搞定！
管理计时器： 需要精确掌控时间的流逝？useRef 就是你的定时专家！
取消订阅函数： 不想被缠人的订阅所困扰？useRef 助你潇洒解绑！

useRef 与 Vue 3 中的 ref：异曲同工，各有千秋

Vue 3 也提供了与 useRef 类似的机制——ref。虽然它们有着异曲同工之妙，但还是有一些微妙的差异。ref 返回的是一个朴实无华的 JavaScript 对象，而 useRef 则提供了一个更具活力的 ref 对象。这赋予了 ref 更大的灵活性，允许我们直接操作它的属性，让控制权牢牢掌握在自己手中。

useRef 的最佳实践

使用 useRef 时，谨记以下准则，让你的代码更上一层楼：

只读属性： useRef 返回的 ref 对象的 current 属性是一个只读属性，请小心呵护，避免意外修改。
卸载时清理： 组件卸载时，别忘了善后，使用 useEffect 来清理 useRef 中存储的任何资源或订阅。
避免存储复杂数据结构： useRef 并不适合存储复杂的数据结构，因为在组件重新渲染时，这些结构不会被更新。

示例代码：一个实践中的 useRef

代码示例胜过千言万语，让我们用一个实例见证 useRef 的魅力：

import React, { useRef } from "react";

const MyComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载后，将 inputRef 与 DOM 节点关联
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
};