React 中的 useState 指南

React 中的 useState 指南

随着你的输入，密码条会从弱变强。React 通过 state 记住你的输入。

State 持有数据。它追踪你的输入或点击操作。

想象一下你在输入你的名字。

• 你的初始状态是一个空字符串。
• 你输入了 J。
• 你调用一个函数，将 state 从 "" 更新为 "J"。
• 你输入了 o。
• 你调用函数将 state 更改为 "Jo"。

每当你更新 state 时，React 都会重新渲染 UI。重新渲染意味着 React 会清除旧视图，并使用更新后的数据绘制一个新视图。

为什么不使用普通变量？ 普通变量虽然会在代码中发生变化，但不会更新屏幕。你的用户会看到旧数据。React state 通过将数据与 UI 连接起来解决了这个问题。

如何使用 useState：

1. 从 React 中导入。 import { useState } from 'react';

2. 声明它。 const [age, setAge] = useState(20);

在这个例子中：

• age 是你的当前值。
• setAge 是用于更改值的函数。
• 20 是你的初始值。

现在就来试试吧。打开一个 React 项目。创建一个计数器。点击按钮来更新计数。观察屏幕如何瞬间发生变化。

来源：https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i