react的useRef用什么作用

useRef 是 React 提供的一个钩子，用于在函数组件中创建和管理对 DOM 元素或组件实例的引用。它返回一个包含 current 属性的对象，可以用来存储对某个值的引用，而这个引用在组件的整个生命周期内保持不变。

useRef 的主要用途
1.访问 DOM 元素:

通过 useRef 创建的引用可以用来访问和操作 DOM 元素。这在处理需要直接操作 DOM 的情况时很有用，比如设置焦点、获取元素的尺寸等。

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

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

  useEffect(() => {
    inputRef.current.focus(); // 组件挂载后设置输入框焦点
  }, []);

  return <input ref={inputRef} />;
}

2.保存可变数据:

useRef 也可以用来保存不引起重新渲染的可变数据。即使 useRef 的值改变，组件也不会重新渲染。

import React, { useRef } from 'react';

function Counter() {
  const count = useRef(0);

  const increment = () => {
    count.current += 1;
    console.log(count.current);
  };

  return <button onClick={increment}>Increment</button>;
}

3.存储上一个渲染的值:
useRef 可以用来存储组件上一个渲染周期中的某些值。

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

function Example() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Now: {count}</p>
      <p>Before: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}