为何在React的useState Hook中必须使用setValue？

React提供了useState Hook，基础使用方式如下：

const [value, setValue] = useState(0);

要更新状态值，正确的写法是：

const increase = () => {
  setValue(value + 1)
}

那为什么不能直接用下面这种写法，非得用setValue呢？

const increase = () => {
  return value + 1;
}

核心原因：React的状态更新机制 #

• 状态的不可变性与响应式触发
  React里的状态变量是不可直接修改的，你拿到的value是当前状态的一个快照副本。直接返回value + 1只是计算出了一个新值，但这个值根本没和React的状态系统绑定——React完全不知道你做了这个计算，自然不会触发组件的重新渲染，页面上的内容也不会同步更新。

• setValue的核心作用
  setValue是React提供的状态更新函数，它的作用有两个：

  1. 把你传入的新值替换掉原有的状态
  2. 通知React状态发生了变化，触发组件重新渲染，让页面同步显示最新状态

简单来说，你自己计算出的新值，只有通过setValue“告知”React，React才会把这个值纳入状态管理体系，进而完成视图更新。

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