React中useState数组解构时为何用const声明可通过setValue修改的value

为什么React中const [value, setValue] = useState(null);可以用const声明可更新的状态？ #

你遇到的这个疑问核心是混淆了「React状态更新触发重渲染生成新变量」和「对同一变量重新赋值」的区别，两者本质完全不同，用const完全符合JS语法规则：

• 首先明确const的语法限制：const只禁止对变量进行重新赋值，不会限制变量指向值的内部变更，更不会限制不同作用域下同名变量的声明。你如果在当前渲染周期尝试编写value = '新值'这种直接赋值的代码，JS会直接抛出语法错误，这就是const在这里起到的约束作用。
• 再讲useState的更新逻辑：当你调用setValue修改状态时，并不会在当前渲染上下文里直接修改value的值，而是会通知React调度组件重新渲染。组件重渲染时函数会完整执行一次，这次执行时调用useState会返回更新后的状态值，此时解构得到的value是属于本次新渲染上下文的全新变量，和上一次渲染的value处在完全独立的作用域中，不存在对旧的const变量重新赋值的情况。

你可以通过下面的等效代码理解每轮渲染的独立作用域：

// 第1次组件渲染，独立函数调用作用域1
const [value, setValue] = useState(null) // 本次渲染value恒为null，不可重新赋值

// 执行setValue('hello')触发重渲染
// 第2次组件渲染，独立函数调用作用域2
const [value, setValue] = useState(null) // 本次渲染value恒为'hello'，是全新的const变量，和上一轮的value无关

另外使用const声明状态是React推荐的最佳实践，可以强制保证状态只能通过setter函数修改，避免开发者直接修改状态值导致的不可预期bug，符合React单向数据流的设计原则。

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