React 中 useRef 的作用和用法是什么？

推荐答案

useRef 是 React 提供的一个 Hook，用于在函数组件中创建一个可变的引用对象。它的主要作用是在组件的整个生命周期中保存一个可变的值，而不会触发组件的重新渲染。useRef 返回的对象包含一个 current 属性，该属性可以被赋值为任何值，并且在组件的整个生命周期中保持不变。

主要用途：

1. 访问 DOM 元素：通过 useRef 可以获取到 DOM 节点的引用，从而直接操作 DOM。
2. 保存可变值：useRef 可以用来保存任何可变的值，类似于类组件中的实例变量。

基本用法：

// www.javascriptcn.com code example
import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    // 在组件挂载后，自动聚焦到输入框
    inputRef.current.focus();
  }, []);

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

本题详细解读

1. useRef 的基本概念

useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

2. useRef 与 DOM 操作

useRef 最常见的用途是访问 DOM 元素。通过将 ref 对象传递给 JSX 中的 ref 属性，React 会在组件挂载时将 DOM 节点赋值给 ref.current，从而可以通过 ref.current 直接操作 DOM。

3. useRef 与状态的区别

useRef 与 useState 不同，useRef 的 current 属性发生变化时，不会触发组件的重新渲染。因此，useRef 适合用于存储那些不需要触发渲染的可变值。

4. useRef 的生命周期

useRef 的值在组件的整个生命周期中保持不变，即使组件重新渲染，ref 对象也不会被重新创建。这使得 useRef 非常适合用于存储跨渲染周期的数据。

5. 示例代码解析

// www.javascriptcn.com code example
import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    // 在组件挂载后，自动聚焦到输入框
    inputRef.current.focus();
  }, []);

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

• useRef(null) 创建了一个 ref 对象，并将其初始化为 null。
• inputRef 被传递给 <input> 元素的 ref 属性，React 会在组件挂载后将 DOM 节点赋值给 inputRef.current。
• useEffect 钩子在组件挂载后执行，通过 inputRef.current.focus() 将焦点设置到输入框。

6. 注意事项

• useRef 的 current 属性是可变的，因此在任何时候都可以修改它。
• 修改 useRef 的 current 属性不会触发组件的重新渲染。
• useRef 的值在组件重新渲染时保持不变，因此可以用于存储跨渲染周期的数据。