import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
React 每次需要重新渲染时都会调用此函数。
但是为什么不每次都初始化状态呢？
当退出函数时，变量的生命就结束了，不是吗？
但是它是如何持续保存状态值的呢？
我不明白。
在useState功能上，有什么逻辑吗？
useState作为一个函数将你给它的值存储在 React 的核心中。当组件重新渲染时，React 会将更新后的计数从其核心传递给组件。
更多信息在这里。
状态仅在您创建组件时初始化一次，这就是React工作原理。从文档：
调用 useState 有什么作用？它声明了一个“状态变量”。通常，当函数退出时变量“消失”，但状态变量被 React 保留。
只是为了了解这里的上下文，让我useState更详细地总结一下它是什么以及它是如何工作的。
什么是useState：
useState帮助您处理功能组件中的状态的钩子也是如此。
它是如何工作的？
调用后，useState您需要传递想要在功能组件中使用的状态的初始值。它返回一对值count和setCount。
所以让我们在下面举个例子：
const [count, setCount] = useState(0);
所以useState返回了两个项目，其中count是当前值。第二项，setCount是一个可以用来更新count状态值的函数。
count可用于表示状态，例如div元素中的值：
return (
<div>{count}</div>
)
为了更新您可以通过调用实现的值setState(12)。
您可以在此处进一步阅读文档。
为什么 useState 函数不是每次都初始化 State？
我认为您对以下内容感到困惑：
const [count, setCount] = useState(0);
因为它只是一个变量！？！
是的，它只是一个变量，但每次从 useState 钩子运行函数时都会用到它。它是本地状态，就像您在基于类的组件中看到的那样。