React中useRef与useState的使用与区别

扛着大炮打飞机

React 是一个流行的 JavaScript 库，用于构建用户界面。它提供了几个钩子，使开发人员能够管理状态并执行副作用。 React 中两个常用的钩子是

1. useRef

复制代码

和

1. useState

复制代码

。虽然它们乍一看似乎很相似，但它们具有不同的目的并且具有不同的用例。在本文中，我们将深入探讨

1. useRef

复制代码

和

1. useState

复制代码

，比较它们的功能并提供示例来说明它们的用法。

理解 useRef ：

React 中的

1. useRef

复制代码

钩子创建了一个在组件呈现之间持续存在的可变引用。与管理状态并触发重新渲染的

1. useState

复制代码

不同，

1. useRef

复制代码

主要用于访问和操作 DOM 或存储不触发重新渲染的可变值。它返回一个带有

1. current

复制代码

属性的可变对象。

示例 1：访问 DOM 元素

假设我们想在单击按钮时关注输入字段。我们可以使用

1. useRef

复制代码

来实现这一点，如下所示：

1. import React, { useRef } from 'react';
   
2. 
   
3. function MyComponent() {
   
4.   const inputRef = useRef(null);
   
5. 
   
6.   const handleClick = () => {
   
7.     inputRef.current.focus();
   
8.   };
   
9. 
   
10.   return (
    
11.     <div>
    
12.       <input ref={inputRef} />
    
13.       <button onClick={handleClick}>Focus Input</button>
    
14.     </div>
    
15.   );
    
16. }

复制代码

在上面的示例中，我们使用

1. useRef

复制代码

创建一个

1. ref

复制代码

并将其分配给

1. inputRef

复制代码

变量。我们将

1. inputRef

复制代码

传递给输入元素的

1. ref

复制代码

属性，使其可用于访问输入的 DOM 节点。单击按钮时，将执行

1. handleClick

复制代码

函数，并调用

1. inputRef.current.focus()

复制代码

以聚焦于输入字段。

理解 useState ：

1. useState

复制代码

挂钩用于管理功能组件内的状态。它允许我们创建可以更新的变量，并在其值发生变化时触发重新渲染。

1. useState

复制代码

钩子返回一个包含两个元素的数组：当前状态值和更新它的函数。

示例 2：管理计数器

让我们使用

1. useState

复制代码

创建一个简单的计数器组件：

1. import React, { useState } from 'react';
   
2. 
   
3. function Counter() {
   
4.   const [count, setCount] = useState(0);
   
5. 
   
6.   const increment = () => {
   
7.     setCount(count + 1);
   
8.   };
   
9. 
   
10.   return (
    
11.     <div>
    
12.       <p>Count: {count}</p>
    
13.       <button onClick={increment}>Increment</button>
    
14.     </div>
    
15.   );
    
16. }

复制代码

在上面的代码中，我们使用数组解构语法来分配

1. count

复制代码

状态变量和

1. setCount

复制代码

函数来更新它。使用

1. useState(0)

复制代码

将

1. count

复制代码

的初始值设置为

1. 0

复制代码

。单击按钮时，将调用

1. increment

复制代码

函数，通过添加

1. 1

复制代码

更新

1. count

复制代码

状态。结果，组件重新渲染，反映

1. count

复制代码

的更新值。

比较 useRef 和 useState ：

虽然

1. useRef

复制代码

和

1. useState

复制代码

都可以存储值，但它们有不同的用途：

• 管理状态：
  1. useState

  复制代码
  旨在管理组件内的状态。当状态更新时，它会触发重新渲染，确保 UI 反映最新值。
  
• 访问和操作 DOM：
  1. useRef

  复制代码
  主要用于与 DOM 交互，例如访问输入值或关注元素。它允许我们存储对 DOM 节点的引用并检索它们的属性，而无需触发重新渲染。
  
• 跨渲染保留值：
  1. useRef

  复制代码
  在组件渲染之间维护相同的值，而
  1. useState

  复制代码
  在每次渲染期间初始化状态。
  
• 重新渲染行为：更新
  1. useState

  复制代码
  返回的值会导致组件重新渲染，同时更新使用
  1. useRef

  复制代码
  的
  1. current

  复制代码
  属性 不会触发重新渲染。
  

用例：

为了进一步了解

1. useRef

复制代码

和

1. useState

复制代码

的用例，让我们探讨一下每个钩子更适合的一些场景：
1.

1. useRef

复制代码

用例：
1.1.  访问 DOM 元素：当您需要访问或操作 DOM 元素（例如聚焦输入、滚动到特定元素或测量元素的大小）时，

1. useRef

复制代码

是合适的选择。它允许您创建对 DOM 节点的引用并访问其属性或方法。
1.2.  存储可变值：如果您有一个值需要在渲染过程中保留，但不会影响组件的 UI 或触发重新渲染，

1. useRef

复制代码

是一个不错的选择。例如，您可以使用

1. useRef

复制代码

存储以前的值、缓存值或保留可变值以进行比较。
2.

1. useState

复制代码

用例：
2.1. 管理组件状态：当您需要管理和更新组件内的状态时，建议使用

1. useState

复制代码

方法。它提供了一种存储和更新影响组件 UI 并触发重新渲染的值的方法。
2.2. 处理用户交互：如果组件中有交互元素（例如复选框、输入字段或切换开关），则通常使用

1. useState

复制代码

来管理与这些交互相关的状态。您可以根据用户输入更新状态并反映 UI 中的更改。

对比示例：

为了更清楚地说明

1. useRef

复制代码

和

1. useState

复制代码

之间的区别，让我们考虑一个可以使用两个钩子的示例：
假设我们有一个带有输入字段和提交按钮的表单。当用户单击提交按钮时，我们希望在不清除输入字段的情况下显示成功消息。
使用

1. useRef

复制代码

：

1. import React, { useRef } from 'react';
   
2. 
   
3. function Form() {
   
4.   const inputRef = useRef(null);
   
5. 
   
6.   const handleSubmit = () => {
   
7.     const value = inputRef.current.value;
   
8.     // 提交表单
   
9.     displaySuccessMessage();
   
10.   };
    
11. 
    
12.   const displaySuccessMessage = () => {
    
13.     // 显示成功消息而不清除输入字段
    
14.   };
    
15. 
    
16.   return (
    
17.     <div>
    
18.       <input ref={inputRef} />
    
19.       <button onClick={handleSubmit}>Submit</button>
    
20.     </div>
    
21.   );
    
22. }

复制代码

在此示例中，我们使用

1. useRef

复制代码

创建对输入字段的引用。单击提交按钮后，我们使用

1. inputRef.current.value

复制代码

访问输入字段的值并继续提交表单。输入字段的值未清除，因为我们没有更新状态或触发重新渲染。
使用

1. useState

复制代码

：

1. import React, { useState } from 'react';
   
2. 
   
3. function Form() {
   
4.   const [inputValue, setInputValue] = useState('');
   
5. 
   
6.   const handleSubmit = () => {
   
7.     // 提交表单
   
8.     displaySuccessMessage();
   
9.   };
   
10. 
    
11.   const displaySuccessMessage = () => {
    
12.     // 展示成功消息
    
13.     setInputValue(''); // 清理输入内容
    
14.   };
    
15. 
    
16.   const handleInputChange = (e) => {
    
17.     setInputValue(e.target.value);
    
18.   };
    
19. 
    
20.   return (
    
21.     <div>
    
22.       <input value={inputValue} onChange={handleInputChange} />
    
23.       <button onClick={handleSubmit}>Submit</button>
    
24.     </div>
    
25.   );
    
26. }

复制代码

在这个版本中，我们使用

1. useState

复制代码

来管理输入字段的状态。我们使用

1. useState('')

复制代码

用空字符串初始化

1. inputValue

复制代码

状态。当用户在输入字段中键入内容时，将调用

1. handleInputChange

复制代码

函数，更新状态并触发重新渲染以反映新值。单击提交按钮时，将执行

1. handleSubmit

复制代码

函数，该函数显示成功消息并通过将

1. inputValue

复制代码

状态设置为空字符串来清除输入字段。
在此示例中，

1. useState

复制代码

用于管理输入字段的值并在用户与其交互时触发重新渲染。

1. displaySuccessMessage

复制代码

中的状态更新通过更新

1. inputValue

复制代码

状态来清除输入字段。

结论：

总之，

1. useRef

复制代码

和

1. useState

复制代码

都是React中必不可少的钩子，但它们有不同的用途。

1. useRef

复制代码

主要用于访问和操作 DOM 或存储可变值而不触发重新渲染。它提供了一个在组件呈现之间持续存在的可变引用。另一方面，

1. useState

复制代码

用于管理组件状态，当状态更新时触发重新渲染。它返回一个状态值和一个更新它的函数。
了解

1. useRef

复制代码

和

1. useState

复制代码

之间的差异并了解何时使用每个钩子对于编写有效且优化的 React 组件至关重要。通过正确利用

1. useRef

复制代码

和

1. useState

复制代码

，您可以使用 React 构建交互式和高性能应用程序。
到此这篇关于React中useRef与useState的使用与区别的文章就介绍到这了,更多相关React useRef与useState内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331275oge.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！