所以我今天陷入了一个非常有趣的问题。
然后了解React中的state variables。所以我认为我应该分享我今天学到的东西。
我们将学习：
- 什么是状态变量？
- 我们如何制作状态变量？
- 为什么我们需要状态变量？ （主要是我们将探索这个！！！）
什么是状态变量？
状态变量维护组件的状态。
我们可以通过usestate（）挂钩制作状态变量。
钩子是React给出的JavaScript函数。时期！！！
反应有一些钩子。每个都有一些超级大国（逻辑是在场景后面写的）。
我们如何制作状态变量？
- 首先，您需要像命名导入一样导入usestate（）挂钩 -
import { useState } from "react";
- 初始化usestate
const [A,setA] = useState('Hello world');
usestate（）钩返回一个具有2个值的数组。
- 具有相应值的变量（在上述情况下为
Hello world） - 更新值的功能
现在，我们的状态变量A具有Hello world值，通过setA()方法，我们可以更改A。
如何通过上述方法更改值？
只需传递函数中的更新值。
setA('Bye world');
现在，A的值已更新为Bye world。
为什么我们需要状态变量？
让我们在此处理解一个例子 -
我们需要添加一个切换功能，即登录/注销按钮的功能，如果用户登录，则按钮文本应为Login，如果单击它，则应更改为Logout，反之亦然。
听起来很容易！
我们可以制作一个变量并在其中存储一个值，然后单击按钮，更改文本。
在下面的代码段 -
- 我们制作了一个可变的
SessionStatus，其初始值是Login。 - 我们添加了一个
onClick处理程序来相应地更改文本。 - 添加了一个简单的逻辑，以将按钮文本更改为
Logout，如果其值为Login，反之亦然。
还添加了日志语句，以检查我们的OnClick处理程序是否被调用，并且我们的变量正在更新。
请尝试 -
代码段1
如果您会在控制台中看到，则变量值正在更改，这意味着我们的点击处理程序被调用，但我们可以在UI中看到按钮文本的更改。
真的很奇怪！
让我们尝试使SessionStatus成为状态变量，然后尝试相同的
代码段2
在这里工作。按钮的文本是UI中的ALSO更改。 但是为什么???
状态变量将UI层与数据层同步。时期!!!
他们维护组件的状态。
在这里，state variable的值正在变化， 无论状态变量更改/更新时，React重新呈现整个组件，否则我们可以说React React Reloads整个组件或我们可以说React React调用组件再次使用更新的值。
React通过 diff算法，即计算previous Virtual DOM和new Virtual DOM之间的差异，然后将差异应用于实际DOM。
这里只有按钮值正在更改，因此React再次将组件重新呈现，仅在DOM中进行更改。
虚拟dom - react以对象的形式保持内存中的UI（DOM）的跟踪，它是虚拟DOM。
React使DOM operations超快。
这是React的核心。
如果您想深入了解一个级别 -
，这是一个有趣的观察结果您将观察到代码片段中的一些怪异。
假设第一次，按钮中的文本为Login，然后单击，它更改为Logout，但在控制台中，它的值仍在打印为Login。
为什么是？
我们将console.log（）添加到正确更新后？
那么，为什么它不打印更新的值，然后在其中？
- 答案是
Setting it不会更改您已经拥有的状态变量，而是triggers a re-render。 - React将与
new render cycle中的new value成为状态变量的new instance。 时期！ - 在单击按钮上打印的值是在重新渲染触发之前组件中变量的值。