React状态与引用（Refs）- 差异和使用场景

在本文中，我们将深入比较React的state和refs，探讨它们在特定场景下的适用性。

当需要在React应用程序中存储数据时，首先要考虑的问题是：“数据是否在组件的生命周期内的某个时刻发生变化？” 如果不会，那么普通的const变量非常适合。

然而，如果数据会发生变化，那么就需要使用useState和useRef钩子。

（本文视频讲解：java567.com）

理解useState和useRef钩子

useState钩子

useState钩子旨在管理组件的状态，表示随时间变化的数据，并且对于组件渲染非常重要。您可以通过从React导入useState钩子来向组件添加状态。

import { useState } from 'react';

useState钩子通常使用初始值进行初始化，并返回一个声明的状态变量及其关联的设置器函数的数组。它的用法如下：

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0); //声明useState钩子
  
  return (
    <>
      <h1>状态示例</h1>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          数量为 {count}
        </button>
      </div>
    </>
  );
}
export default App;

在上面的代码中，

1. useState用零值初始化，并返回一个count变量和一个setCount设置器函数。
2. count变量由setCount设置器函数动态设置，该函数将count增加1。
3. 对于每次按钮点击，都会重新渲染App组件，并在按钮文本中显示更新后的值。

了解React状态是很重要的，因为它是最常用的概念之一。

useRef钩子

useRef钩子用于在React组件中创建引用。引用是一个具有current属性的对象，该属性保存一个值。它基本上引用了一个DOM元素或组件的实例。我们可以通过访问current属性来读取和更新值。

const ref = useRef(initialValue)

ref.current = initialValue

下面是引用在实际中的完整代码片段：

import { useRef } from "react";

function App() {
  let ref = useRef(0); 
  
  function handleIncrease() {
    ref.current++;
    alert(`您已点击了${ref.current}次`);
  }
  return (
    <>
      <h1>引用示例</h1>
      <div>
        <button onClick={handleIncrease}>点击我</button>
      </div>
    </>
  );
}

export default App;

让我们来分解一下：

1. 我们从React中导入了useRef。
2. 在我们的App组件中，我们声明了一个ref对象，初始值设置为零。
3. handleIncrease是我们的处理函数，它将ref.current的值增加1，然后警告用户当前值。
4. 在我们的App组件的JSX中，我们有一个带有onClick属性和传递给它的handleIncrease处理函数的按钮。

了解了这两个钩子的工作原理后，我们将继续比较和探讨它们何时适合使用。

React状态与引用（Ref）

渲染触发

在React中，状态总是触发重新渲染，这是由一种称为“协调（reconciliation）”的机制所致——根据对状态或props所做的更改来更新用户界面。

在幕后，React将新状态与先前状态进行比较，并计算出更新用户界面所需的最小更改。这个过程确保了与更改后的状态或props的一致性。

另一方面，当对引用进行更改时，引用不会触发重新渲染。引用并不直接与组件的渲染周期相关联。

因此，如果您希望拥有对数据更改做出反应的一致性用户界面，则建议使用状态。引用更适合用于管理可变值，而不影响用户界面。

可变性

React状态一旦设置就无法直接更改，因为状态变量的设置器函数会更新。通过使用这种方法，React保持了数据流的可预测性和稳定性。这也有助于使调试更加容易。

相反，引用是可变的，因为您可以在渲染过程之外修改ref current值。与状态不同，可以在任何时候更改值——引用没有更新函数。

读/写操作

useState钩子的设置器函数允许您更新状态值。例如：

const [state, setState] = useState(false)
function handleOpposite(){
	setState(!state)
 }

在这段代码中，我们可以看到：

1. 初始值设置为布尔值false。
2. handleOpposite函数对state的布尔值进行了否定，而setState存储了更新后的true值。

在这个简单的操作中，

1. 隐式的读操作是必要的，因为在否定之前必须访问初始值。
2. 当对初始值使用否定（!）时，发生了写操作，这将值更改为相反值。

状态的显式读操作发生在您在组件的JSX中直接访问状态变量时。例如：

<button onClick={() => setCount((count) => count + 1)}>
  数量为 {count}
 </button>

{count}是当前访问的状态值，并将相应地显示在UI上。

另一方面，在渲染过程中访问或修改ref的当前值可能会干扰React的协调过程，可能导致虚拟DOM和实际DOM之间的不一致。

为了确保组件行为的可预测性和性能的最佳表现，最好遵守React的指导方针，并在渲染过程中避免访问或修改引用。

跨渲染保持不变

在React中跨渲染保持数据不变意味着数据在组件的不同渲染周期之间保持一致和可用。当数据持久化时，它在重新渲染后保持不变且可访问。状态和引用都可以在渲染过程中保持数据不变。

持久性对于维护应用程序状态的完整性至关重要，并确保组件的操作符合预期。

异步更新

在React中，状态的更新是异步的，这意味着当有更新请求时，更新可能不会立即执行。React可能会将某些状态更改留到以后再更新，同时一次性更新其他组件！

引用更新是同步进行的，其中任务按顺序进行。每个任务在前一个任务完成后开始，确保它们以可预测和确定的方式执行。

结论

在本文中，我们广泛地介绍了处理React应用程序中动态数据（即将更改的数据）的钩子——useState和useRef。

我们比较了这两个钩子，现在您应该了解它们的相似之处、差异之处以及它们最适合使用的场景和时机。

（本文视频讲解：java567.com）