react useRef 作用

React 的 useRef 钩子函数的作用是：

1. 创建引用：useRef 创建一个引用对象，用于存储某个值或对象。
2. 持久化状态：useRef 可以用于持久化某个状态，即使组件重新渲染，也不会丢失该状态。
3. 访问 DOM 节点：useRef 可以用于访问 DOM 节点，例如获取某个元素的引用。

useRef 的基本语法是：

import { useRef } from 'react';

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

  return (
    <div>
      <input ref={inputRef} type='text' />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}

在上面的示例中，我们使用 useRef 创建了一个引用对象 inputRef，用于存储某个输入框的引用。然后，我们使用 ref 属性将该引用对象关联到输入框上。在按钮的点击事件处理函数中，我们使用 inputRef.current 来访问输入框的引用，并将其聚焦。

useRef 的特点是：

• 持久化状态：useRef 创建的引用对象是持久化的，即使组件重新渲染，也不会丢失该状态。
• 可变：useRef 创建的引用对象是可变的，可以通过 current 属性来访问和更新该引用对象。
• 不触发重新渲染：更新 useRef 创建的引用对象不会触发组件的重新渲染。

useRef 的常见用法包括：

• 访问 DOM 节点：使用 useRef 来访问某个 DOM 节点，例如获取某个元素的引用。
• 持久化状态：使用 useRef 来持久化某个状态，即使组件重新渲染，也不会丢失该状态。
• 实现复杂的交互逻辑：使用 useRef 来实现复杂的交互逻辑，例如实现某个元素的拖拽功能。

需要注意的是，useRef 创建的引用对象是可变的，因此需要小心地更新该引用对象，以免引发不必要的重新渲染。