react 中的 useRef怎么用？-前后端技术分享

在 React 中，Ref 是用来访问 DOM 元素或组件实例的工具，它可以让你直接访问一个元素或组件的实例，而不是通过 React 的渲染机制来更新它。React 提供了 useRef 钩子来创建和操作 ref。

1. 基本用法：`useRef`

示例：获取 DOM 元素的引用

在 React 中，最常见的 ref 用法是访问 DOM 元素。通过 useRef 创建一个 ref，然后将它附加到一个 DOM 元素上，之后就可以访问该元素。

import React, { useRef } from "react";

function MyComponent() {
  // 创建一个 ref 来引用 DOM 元素
  const inputRef = useRef(null);

  const focusInput = () => {
    // 使用 ref 访问 DOM 元素并调用 focus() 方法
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me!" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default MyComponent;

关键点：

useRef 创建的 ref 对象是一个持久化的引用，ref.current 指向实际的 DOM 元素或组件实例。
每次组件重新渲染时，ref 的值不会丢失。

访问类组件实例的 `ref`

虽然大部分 React 项目都使用函数组件，但如果你仍在使用类组件时，ref 也能用来访问组件的实例。

import React, { Component } from "react";

class MyClassComponent extends Component {
  focus() {
    console.log("Focus method of class component!");
  }

  render() {
    return <div>Class Component</div>;
  }
}

function ParentComponent() {
  const classComponentRef = useRef(null);

  const callFocusMethod = () => {
    // 使用 ref 调用类组件的方法
    classComponentRef.current.focus();
  };

  return (
    <div>
      <MyClassComponent ref={classComponentRef} />
      <button onClick={callFocusMethod}>Call Focus Method</button>
    </div>
  );
}

export default ParentComponent;

关键点：

通过 useRef 可以访问类组件的实例并调用它的方法。

3. `ref` 用于存储任何可变数据

useRef 不仅用于 DOM 元素，还可以用于存储任何类型的可变数据。它不触发组件的重新渲染，因此适合用来存储某些不需要改变 UI 的值。

import React, { useRef } from "react";

function Timer() {
  const countRef = useRef(0); // 使用 ref 存储可变数据

  const incrementCount = () => {
    countRef.current += 1;
    console.log(countRef.current); // 输出更新后的 count 值
  };

  return (
    <div>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Timer;

关键点：

useRef 可以用来存储任何值，且不会触发重新渲染。
在上面的例子中，每次点击按钮时，countRef.current 的值都会增加，但组件不会因为它的变化而重新渲染。

4. `forwardRef` 和组件间传递 `ref`

如果你需要将 ref 传递给子组件（特别是函数组件），你可以使用 React.forwardRef 来包装子组件，使其能够接收并处理 ref。

import React, { useRef, forwardRef } from "react";

// 子组件，使用 forwardRef 来接收父组件传递的 ref
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} type="text" placeholder="Focus me!" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default ParentComponent;