react的useRef的用法

React的useRef hook是用来创建一个可以在函数组件中保存数据的引用的。它类似于在类组件中使用this来引用DOM元素或组件实例，但是useRef可以用于任何类型的数据。

useRef返回一个可变的ref对象，它的current属性可以存储任何数据。当ref对象传递给组件时，组件可以修改它的current属性来保存任何数据。

useRef可以用于以下场景：

获取DOM元素的引用
保存一个变量，其值在组件重渲染时不会改变
保存一个引用，以便在组件中的其他函数中使用

下面是一个使用useRef的示例：

import React, { useRef } from 'react';

function MyComponent() {
  // 创建一个ref对象
  const myRef = useRef(null);

  // 在组件渲染后，将myRef.current设置为DOM元素
  const handleClick = () => {
    myRef.current.focus();
  };

  // 在组件渲染后，可以使用myRef.current来保存一个变量
  const myVariable = useRef("initial value");

  // 在组件渲染后，可以使用myRef.current来保存一个引用
  const myFunction = useRef(() => {
    console.log("I am a function");
  });

  return (
    <div>
      <input ref={myRef} type="text" />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

在上面的示例中，我们使用useRef创建一个ref对象，并将其传递给一个input元素的ref属性。在组件渲染后，我们可以使用myRef.current来引用input元素，并在handleClick函数中设置input元素的焦点。

此外，我们还使用useRef创建了一个ref对象来保存一个变量和一个函数引用。在组件重渲染时，这些值都不会改变，因为它们是存储在ref对象的current属性中的。