关于 React useState Hook 你需要了解的一切 - 里面的实际例子

reactjs usestate hook：初学者指南

介绍

reactjs 是一个用于构建用户界面的流行 javascript 库，它引入了 hooks 来简化和增强组件逻辑。 react 中最常用的钩子之一是 usestate 钩子，它管理组件的状态。了解其工作原理可以帮助您释放 react 的全部潜力。

在本初学者指南中，我们将探讨什么是钩子、如何使用 usestate 初始化和更新状态，并深入探讨保持和更新各种类型的状态。最后，您将能够自信地管理组件内的状态。让我们跳进去吧！

什么是钩子？

react 中的钩子

hooks 是允许您使用 state 和其他 react 功能而无需编写类组件的函数。在钩子之前，管理组件状态只能在类组件内部进行。使用 usestate 这样的钩子，您可以向功能组件添加状态，使它们更加通用。

react 提供了几个 hooks，例如：

• usestate – 用于管理状态。
• useeffect – 用于获取数据等副作用。
• usecontext – 用于管理应用程序中的上下文。

挂钩简化了状态管理并减少了对复杂的基于类的组件的需求。钩子的美妙之处在于它们能够提供您所需的功能，同时保持更清晰、更易读的代码。

如何初始化 usestate

基本初始化

在函数组件中初始化 usestate 很简单。首先从 react 导入钩子并在组件内调用它。语法如下：

import react, { usestate } from 'react';

function counter() {
  // declare state variable and its updater function
  const [count, setcount] = usestate(0);

  return (
    <div>
      <p>you clicked {count} times</p>
      <button onclick="{()"> setcount(count + 1)}&gt;
        click me
      </button>
    </div>
  );
}

分解：

• usestate(0) 初始化状态，初始值为 0。
• count 是状态变量，setcount 是用于更新此状态的函数。
• 每次单击按钮时，状态都会更新，并且组件会使用新值重新渲染。

如何读取状态

访问当前状态

读取当前状态很简单。您只需直接在 jsx 中使用状态变量（上例中的 count）即可。由于 react 在状态更改时重新渲染组件，因此更新后的值会自动反映在 ui 中。

让我们调整一下之前的示例来展示如何访问状态：

<p>current count: {count}</p>

此代码访问计数状态并动态显示它。

如何更新状态

使用状态设置器函数

react 中的状态更新是使用 usestate 中的第二个元素完成的，即 setter 函数。此函数采用更新后的值并以新状态重新渲染组件。

以下是如何递增和递减计数器的示例：

<button onclick="{()"> setcount(count + 1)}&gt;increment</button>
<button onclick="{()"> setcount(count - 1)}&gt;decrement</button>

react 确保每当状态更新时，更改都会无缝地反映在 ui 中。重要的是要记住，状态更新在 react 中是异步的，这意味着在调用 setter 函数后您不会总是立即看到更新的状态。

国家可以持有什么？

不同类型的价值观

react 中的状态可以保存多种数据类型，包括：

• 原始类型，例如数字、字符串和布尔值。
• 对象 和 数组.
• 空 和未定义 值。

让我们看一下这些示例：

将字符串保存在状态中：

const [name, setname] = usestate("john");

将数组保存在状态中：

const [items, setitems] = usestate([1, 2, 3]);

将对象保持在状态中：

const [user, setuser] = usestate({ name: "john", age: 30 });

react 的 usestate 钩子允许您管理这些不同类型的数据，但在更新复杂类型（例如对象和数组）时必须小心，我们接下来将探讨。

更新状态中的对象和数组

不可变的更新

在 react 中使用对象或数组时，不可更改地更新它们至关重要。 react 不会深入比较嵌套对象，因此直接修改对象不会触发重新渲染。相反，您必须使用更新的值创建新对象或数组。

示例：更新对象

const [user, setuser] = usestate({ name: "john", age: 30 });

function updatename() {
  setuser(prevstate => ({
    ...prevstate,
    name: "doe"
  }));
}

在此示例中：

• 我们使用 ...prevstate 将现有状态 (prevstate) 传播到一个新对象中。
• 然后，我们修改 name 属性而不改变原始用户对象。

示例：更新数组

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

这里：

• 我们展开之前的数组 (previtems) 并附加新项目 (4)，创建一个新数组。

常见问题解答部分

为什么使用 usestate 而不是基于类的状态？

钩子，如 usestate，简化了功能组件内的状态管理，使代码比类组件更具可读性并且更简洁。

usestate 可以保存多种数据类型吗？

是的，usestate 可以保存字符串、数字、数组、对象、布尔值，甚至 null 或未定义的值。

更新状态是异步的吗？

是的，react 会批量更新状态，并且更改可能不会在调用 setter 函数后立即反映。

如何更新对象或数组等复杂状态？

为了避免改变原始状态，请始终创建对象或数组的副本，然后使用扩展运算符 (...) 对其进行不可变的更新。

结论

usestate 钩子是 react 中最强大、最常用的钩子之一。它可以帮助您管理功能组件内的本地状态，使您的 react 代码更干净、更高效。无论您是处理简单变量还是复杂对象和数组，了解如何正确使用和更新状态是构建动态 react 应用程序的关键。继续练习，很快你就会轻松掌握 react 的状态管理！

现在你已经通过 usestate 从零变成了英雄，尝试将它合并到你的项目中，看看 react 的魔力在起作用！