useRef Hook

news2024/10/3 19:26:00

React中的useRef钩子是一个强大的功能，允许您创建对DOM元素或任何其他值的可变引用，这些引用在组件的整个生命周期中持续存在。下面是它如何工作的详细解释。

什么是`useRef`？

持久存储：useRef提供了一种保存可变引用的方法，该方法在更新时不会触发重新渲染。这与state不同，在state中，更新状态变量将导致组件重新渲染。

返回一个可变对象：当你调用useRef（initialValue）时，它返回一个可变对象，带有一个你可以修改的当前属性。传递给useRef的初始值设置为current，但您可以随时更改current。

基本语法

const myRef = useRef(initialValue);

`useRef`示例

下面是一个简单的例子，其中useRef用于访问DOM元素：

import React, { useRef } from 'react';

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

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

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

export default FocusInput;

示例的解释

创建一个引用：const inputRef = useRef(null) 创建一个引用来保存对输入元素的引用。

重新定义Ref：input元素的ref属性被赋给inputRef。这允许React将输入DOM元素附加到inputRef的当前属性。

调用Ref：当单击按钮时，focusInput函数通过inputRef.current访问输入元素，并在其上调用focus()。

使用场景

使用DOM元素：如示例所示，useRef通常用于直接访问DOM元素并与之交互。

存储可变值：您可以使用useRef存储任何可变值，这些值在更改时不需要重新呈现，例如计时器ID或先前值。

const timerRef = useRef();

   const startTimer = () => {
     timerRef.current = setTimeout(() => {
       // some action
     }, 1000);
   };

   const stopTimer = () => {
     clearTimeout(timerRef.current);
   };

跨渲染器保持值：与state不同，useRef中保存的值不会在重新渲染时重置。这对于跟踪回调或效果中使用的值非常有用。

与第三方库集成：当使用直接操作DOM的第三方库时，useRef可以提供一种方法来保持对这些DOM节点的引用。