react 中useRef的用法

在React中，使用useRef可以创建一个可变的ref引用，允许你访问DOM节点或者在组件之间存储任意的可变值。

useRef本质上是提供一个容器，容器中存放的内容可以在组件的多次渲染之间进行保留，以及实现对DOM节点的操作。

以下是一些useRef的用法和示例：

1. 使用useRef访问DOM节点：

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

在上面的示例中，我们通过useRef创建一个名为inputRef的变量，它将引用input元素的DOM节点。当按钮被点击时，我们调用handleFocus函数并在其中使用ref.current.focus()方法聚焦input元素。

1. useRef存储可变数据：

import React, { useState, useRef } from 'react';

function MyComponent() {
  const counterRef = useRef(0);
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(counter + 1);
    counterRef.current += 1;
  }

  return (
    <div>
      <p>Counter: {counter}</p>
      <p>Counter (ref): {counterRef.current}</p>
      <button onClick={handleClick}>Increment Counter</button>
    </div>
  );
}

在上面的示例中，我们使用useRef创建一个名为counterRef的变量，并初始化为0。我们还使用useState创建一个名为counter的状态和一个名为setCounter的更新函数。

当按钮被点击时，我们调用setCounter更新counter状态，同时我们也通过ref.current更新了counterRef变量的值。在组件下一次重新渲染时，counter状态会被重置，但是counterRef变量的值会保留在当前状态。

总之，使用useRef可以轻松地访问DOM节点以及在组件之间存储可变数据。