React的useState如何改变const声明的变量值？原理疑问

先看你的代码：

const [count, setCount] = useState(0);
const handleIncrement = () => {
    setCount(count + 1);
};

核心误区：count 从来没被修改过 #

你用const声明的count确实是不可修改的常量，它的值从始至终都没变过。你觉得它"变了"，是因为每次组件重新渲染时，整个组件函数都会重新执行一遍：

• 第一次渲染：组件执行，调用useState(0)，返回初始值0，这个0被赋值给这次渲染的count常量。
• 当你调用setCount(count + 1)时，React 会更新它内部维护的状态值，然后触发组件重新渲染。
• 第二次渲染：组件函数再次执行，调用useState(0)，这时候 React 不会再用初始值0，而是返回它内部维护的最新状态值（也就是1），这个1被赋值给这次渲染的新的count常量。

简单说，每次渲染的count都是独立的常量，它们不是同一个变量，只是名字一样而已。前一次渲染的count还是0，新渲染的count是1，两者互不干扰。

为什么调用count能拿到最新值？ #

每次组件重新渲染时，组件函数会从头执行，useState会根据当前组件的状态快照返回对应的值。React 内部会为每个组件实例维护一个状态存储，当你调用setCount时，就是在告诉 React 更新这个存储里的值，下一次渲染时useState就会取出更新后的值，赋值给新的count常量。

关于"实例"的误解 #

setCount并不是创建count的实例，它是一个由useState返回的更新函数，作用是通知 React 更新状态并触发重新渲染。你所说的"实例"其实是每次渲染时生成的独立变量，它们都是各自渲染周期里的常量。

总结一下：

• const声明的count从未被修改，每次渲染都是新的常量。
• setCount的作用是触发重新渲染，让 React 在下次执行组件函数时返回新的状态值。
• 每次渲染读取的都是当前渲染周期里的count常量，这个常量是useState根据最新状态生成的。

内容的提问来源于stack exchange，提问作者donuy