为何用const声明的useState状态变量仍能被修改？

首先得明确两个核心点：const的本质，以及React组件的渲染逻辑。

1. const的限制是「不能重新赋值」，不是「值不能变」 #

const声明的变量，核心规则是不允许直接重新赋值，比如下面的代码会直接报错：

const num = 0;
num = 1; // 报错：Assignment to constant variable.

但如果是引用类型（比如对象、数组），const只是锁定变量的引用，内部属性依然可以修改：

const obj = { count: 0 };
obj.count = 1; // 完全合法，因为没有重新给obj赋值

不过回到useState的场景，哪怕counter是基本类型（数字、字符串），你也没在修改原来的counter——你只是让React创建了一个新的counter。

2. setCounter没有修改原变量，而是触发了组件重新渲染 #

当你调用setCounter时，React会做两件事：

• 更新它内部维护的状态值
• 触发组件的重新渲染

组件重新渲染时，整个组件函数会被重新执行一遍。这时候const [counter, setCounter] = useState()会从React的状态管理中取出更新后的值，生成一个全新的const变量counter。

举个直观的例子：
第一次渲染组件时，函数执行，useState(0)返回[0, setCounter]，此时的counter是值为0的常量；
点击按钮调用setCounter(1)后，React重新执行组件函数，useState这次返回[1, setCounter]，此时的counter是值为1的新常量。

这两个counter是完全独立的变量，只是名字相同，它们分别存在两次函数执行的不同作用域里。原来的counter（值为0的那个）并没有被修改，只是不再被使用了——因为组件已经重新渲染，现在用的是新的counter。

总结一下：你觉得counter被修改了，其实是组件重新渲染后生成了同名的新常量，而非修改了原来的const变量。

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