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

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《关于 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)}>
        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)}>increment</button>
<button onclick={() => setcount(count - 1)}>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 的魔力在起作用！

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《关于 React useState Hook 你需要了解的一切 - 里面的实际例子》文章吧，也可关注golang学习网公众号了解相关技术文章。