React useRef Hook

概述：在本教程中，您将学习 React useRef hook 如何直接访问 DOM 元素并保持渲染之间的值。

React useRef Hook 简介

在 React 中，useRef hook 允许您像在普通 JavaScript 中使用 document.querySelector() 一样直接访问 DOM 元素。此外，useRef hook 允许您在不重新渲染的情况下修改状态。

以下是使用 useRef hook 的步骤

步骤 1. 从 React 中导入 useRef

import React, { useRef } from 'react';Code language: JavaScript (javascript)

步骤 2. 创建 ref 对象

使用初始值调用 useRef() 函数来创建一个 ref 对象

const myRef = useRef(initialValue);Code language: JavaScript (javascript)

useRef() 函数的返回值是一个可变对象 MyRef。

这意味着更新 ref 的值不会导致重新渲染。这是 useRef 和 useState hook 之间的主要区别。

步骤 3. 将 ref 对象附加到 DOM 元素。

如果要直接访问 DOM 元素，请使用 ref 属性将 ref 附加到 DOM 元素。

<input ref={myRef} type="text" />Code language: JavaScript (javascript)

步骤 4. 使用 ref 对象。

在事件处理程序、效果 hook 或组件的任何其他部分中，通过 .current 属性访问 ref 的当前值。

const handleClick = () => {
  console.log(myRef.current.value);
};Code language: JavaScript (javascript)

步骤 5. 更新 ref

更新 ref 对象的 .current 属性以更改其值，而不会导致重新渲染。

myRef.current = newValue;Code language: JavaScript (javascript)

React useRef Hook 用法

在实践中，您将使用 useRef() hook 来直接访问 DOM 元素或管理可变对象，而不会导致重新渲染。

直接访问 DOM 元素

以下组件展示了如何使用 useRef hook 直接访问 DOM 元素

import { useRef } from 'react';

const SubscriberForm = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" ref={inputRef} />
      <button type="submit" onClick={handleClick}>
        Submit
      </button>
    </div>
  );
};

export default SubscriberForm;
Code language: JavaScript (javascript)

SubscriberForm 具有一个输入元素和一个按钮。当您单击按钮时，输入将获得焦点。

工作原理。

首先，从 react 中导入 useRef

import { useRef } from 'react';Code language: JavaScript (javascript)

其次，用初始值为 null 声明一个 ref 对象

const inputRef = useRef(null);Code language: JavaScript (javascript)

第三，将 ref 对象附加到输入的 ref 属性

<input type="email" id="email" ref={inputRef} />Code language: JavaScript (javascript)

当 React 渲染组件时，它将设置 ref 对象的 current 属性为输入（DOM 节点）。您可以访问 DOM 节点的方法，如 focus()。

最后，当用户单击提交按钮时，通过调用 DOM 元素的 focus() 方法，将焦点设置到输入元素。

const handleClick = (e) => {
  inputRef.current.focus();
};Code language: JavaScript (javascript)

存储可变值

以下示例展示了如何使用 ref 存储跨渲染持久化的可变值，而不会触发重新渲染。

import { useRef } from 'react';

const Counter = () => {
  const countRef = useRef(0);

  const incrementCount = () => {
    countRef.current++;
    alert(countRef.current);
  };

  return <button onClick={incrementCount}>Increment Count</button>;
};

export default Counter;Code language: JavaScript (javascript)

工作原理。

首先，从 react 库中导入 useRef

import { useRef } from 'react';Code language: JavaScript (javascript)

其次，从 useRef() hook 返回 countRef，其初始值为 0

const countRef = useRef(0);Code language: JavaScript (javascript)

第三，当用户单击按钮时，增加 ref 的值

const incrementCount = () => {
  countRef.current++;
  alert(countRef.current);
};Code language: JavaScript (javascript)

useRef vs. useState Hook

下表突出了 useRef 和 useState hook 之间的区别

总结

• 使用 useRef() hook 直接访问 DOM 元素并管理可变状态，而不会导致不必要的重新渲染。