useRef React钩子

useRef是React中的一个钩子函数，用于在函数组件中创建可变的引用。它返回一个可变的ref对象，该对象在组件的整个生命周期内保持不变。

useRef的主要作用是在函数组件中存储和访问可变的值，类似于在类组件中使用实例变量。与useState不同，useRef返回的ref对象在更新时不会触发组件的重新渲染。

使用useRef可以实现以下功能：

1. 访问DOM元素或其他React组件：可以通过ref.current属性来访问被ref引用的DOM元素或其他React组件。
2. 存储和访问任意可变值：可以使用ref.current来存储和访问任意可变的值，而不会触发组件的重新渲染。
3. 在effect中保存变量的引用：可以在effect中使用useRef来保存变量的引用，以便在effect的下一次执行中使用该引用。

useRef的使用示例：

import React, { useRef } from 'react';

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

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

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

在上面的示例中，我们使用useRef创建了一个名为inputRef的引用。通过将inputRef赋值给input元素的ref属性，我们可以在handleClick函数中使用inputRef.current来访问并聚焦该input元素。

推荐的腾讯云相关产品：无

参考链接：

• React官方文档：useRef