React 中的 useRef 与 useState

2024-11-22 12:29:26

React 中两个常用的钩子是 useRef 和 useState 。虽然它们乍一看似乎很相似，但它们具有不同的目的并且具有不同的用例。在本文中，我们将深入探讨 useRef 和 useState ，比较它们的功能并提供示例来说明它们的用法。

理解 `useRef` ：

React 中的 useRef 钩子创建了一个在组件呈现之间持续存在的可变引用。与管理状态并触发重新渲染的 useState 不同， useRef 主要用于访问和操作 DOM 或存储不触发重新渲染的可变值。它返回一个带有 current 属性的可变对象。

示例 1：访问 DOM 元素

假设我们想在单击按钮时关注输入字段。我们可以使用 useRef 来实现这一点，如下所示：

import React, { useRef } from 'react';

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

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

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

在上面的示例中，我们使用 useRef 创建一个 ref 并将其分配给 inputRef 变量。我们将 inputRef 传递给输入元素的 ref 属性，使其可用于访问输入的 DOM 节点。单击按钮时，将执行 handleClick 函数，并调用 inputRef.current.focus() 以聚焦于输入字段。

理解 `useState` ：

useState 挂钩用于管理功能组件内的状态。它允许我们创建可以更新的变量，并在其值发生变化时触发重新渲染。 useState 钩子返回一个包含两个元素的数组：当前状态值和更新它的函数。

示例 2：管理计数器

让我们使用 useState 创建一个简单的计数器组件：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在上面的代码中，我们使用数组解构语法来分配 count 状态变量和 setCount 函数来更新它。使用 useState(0) 将 count 的初始值设置为 0 。单击按钮时，将调用 increment 函数，通过添加 1 更新 count 状态。结果，组件重新渲染，反映 count 的更新值。

比较 `useRef` 和 `useState` ：

虽然 useRef 和 useState 都可以存储值，但它们有不同的用途：

管理状态： useState 旨在管理组件内的状态。当状态更新时，它会触发重新渲染，确保 UI 反映最新值。
访问和操作 DOM： useRef 主要用于与 DOM 交互，例如访问输入值或关注元素。它允许我们存储对 DOM 节点的引用并检索它们的属性，而无需触发重新渲染。
跨渲染保留值： useRef 在组件渲染之间维护相同的值，而 useState 在每次渲染期间初始化状态。
重新渲染行为：更新 useState 返回的值会导致组件重新渲染，同时更新使用 useRef 的 current 属性不会触发重新渲染。

用例：

为了进一步了解 useRef 和 useState 的用例，让我们探讨一下每个钩子更适合的一些场景：

1. useRef 用例：

1.1. 访问 DOM 元素：当您需要访问或操作 DOM 元素（例如聚焦输入、滚动到特定元素或测量元素的大小）时， useRef 是合适的选择。它允许您创建对 DOM 节点的引用并访问其属性或方法。

1.2. 存储可变值：如果您有一个值需要在渲染过程中保留，但不会影响组件的 UI 或触发重新渲染， useRef 是一个不错的选择。例如，您可以使用 useRef 存储以前的值、缓存值或保留可变值以进行比较。

2. useState 用例：

2.1. 管理组件状态：当您需要管理和更新组件内的状态时，建议使用 useState 方法。它提供了一种存储和更新影响组件 UI 并触发重新渲染的值的方法。

2.2. 处理用户交互：如果组件中有交互元素（例如复选框、输入字段或切换开关），则通常使用 useState 来管理与这些交互相关的状态。您可以根据用户输入更新状态并反映 UI 中的更改。

对比示例：

为了更清楚地说明 useRef 和 useState 之间的区别，让我们考虑一个可以使用两个钩子的示例：

假设我们有一个带有输入字段和提交按钮的表单。当用户单击提交按钮时，我们希望在不清除输入字段的情况下显示成功消息。

使用 useRef：

import React, { useRef } from 'react';

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

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // 提交表单
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // 显示成功消息而不清除输入字段
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

在此示例中，我们使用 useRef 创建对输入字段的引用。单击提交按钮后，我们使用 inputRef.current.value 访问输入字段的值并继续提交表单。输入字段的值未清除，因为我们没有更新状态或触发重新渲染。

使用 useState ：

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // 提交表单
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // 展示成功消息
    setInputValue(''); // 清理输入内容
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

在这个版本中，我们使用 useState 来管理输入字段的状态。我们使用 useState('') 用空字符串初始化 inputValue 状态。当用户在输入字段中键入内容时，将调用 handleInputChange 函数，更新状态并触发重新渲染以反映新值。单击提交按钮时，将执行 handleSubmit 函数，该函数显示成功消息并通过将 inputValue 状态设置为空字符串来清除输入字段。

在此示例中， useState 用于管理输入字段的值并在用户与其交互时触发重新渲染。 displaySuccessMessage 中的状态更新通过更新 inputValue 状态来清除输入字段。

码农公寓

理解 useRef ：

示例 1：访问 DOM 元素

理解 useState ：

示例 2：管理计数器

比较 useRef 和 useState ：

用例：

对比示例：

相关文章

理解 `useRef` ：

理解 `useState` ：

比较 `useRef` 和 `useState` ：