useRef: 通往 React 世界中的记忆之道

useRef 了解你的基本原理

useRef 是一个神奇的 React 钩子，它可以帮你管理组件中的状态。不同于 useState 之类的状态管理工具，useRef 不会触发组件的重新渲染，因此它对性能的影响非常小。

简单来说，useRef 可以让你在组件中创建和引用一个可变值，并且这个值在组件的整个生命周期中都不会改变。这让你可以轻松地存储和使用各种信息，例如：

• 输入框中的文本内容
• 表单中的数据
• 计时器或其他状态值

function MyComponent() {
  // 创建一个名为 "count" 的 ref
  const countRef = useRef(0);

  // 更新 ref 的值
  countRef.current++;

  // 使用 ref 的值
  console.log(countRef.current); // 输出: 1
}

巧妙应用 useRef，化解 React 难题

useRef 的应用场景非常广泛，下面是一些常见的使用场景：

1. 输入框中的文本内容

function InputComponent() {
  // 创建一个名为 "input" 的 ref
  const inputRef = useRef(null);

  // 在组件挂载后，将 ref 赋给输入框元素
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  // 使用 ref 的值
  const inputValue = inputRef.current.value;
}

2. 表单中的数据

function FormComponent() {
  // 创建一个名为 "form" 的 ref
  const formRef = useRef(null);

  // 在组件挂载后，将 ref 赋给表单元素
  useEffect(() => {
    formRef.current.addEventListener("submit", (e) => {
      e.preventDefault();
      // 使用 ref 的值
      const formData = new FormData(formRef.current);
      console.log(formData);
    });
  }, []);
}

3. 计时器或其他状态值

function TimerComponent() {
  // 创建一个名为 "timer" 的 ref
  const timerRef = useRef(null);

  // 创建一个计时器
  useEffect(() => {
    timerRef.current = setInterval(() => {
      // 使用 ref 的值
      console.log(new Date());
    }, 1000);

    // 在组件卸载时清除计时器
    return () => {
      clearInterval(timerRef.current);
    };
  }, []);
}

useRef 可以让你轻松解决这些问题，帮助你编写出更健壮、更可靠的 React 组件。