传递状态当前值时setState是否执行操作？布尔状态更新方案疑问

1. 传递当前状态值给setState时，React会做什么？ #

当你调用setMyState(当前状态值)（比如myState已经是true时调用setMyState(true)），React确实会走一遍状态更新流程，但最终不会触发组件重渲染——因为React会对比更新前后的状态值，发现没有变化，就会跳过后续的渲染逻辑（包括子组件的渲染，除非子组件依赖了其他变化的状态）。

这里要注意，这个对比是浅比较：如果是对象、数组这类复杂类型，哪怕内容一致但引用不同，React还是会认为状态变化并触发重渲染，但你的场景是布尔值，不存在这个问题。

2. 两种写法的对比 #

写法一：!myState && setMyState(true) #

• 优势：当myState已经是true时，完全不会调用setMyState，能省去React内部那套状态更新的流程（哪怕最后会跳过渲染），理论上能省一点点处理开销。
• 不足：多了一层条件判断，代码多了一行，但逻辑很直白。

写法二：直接调用setMyState(true) #

• 优势：代码更简洁，不用额外写判断逻辑。
• 不足：每次用户操作都会触发setMyState调用，哪怕状态已经是true。但正如前面所说，React会自动跳过无变化的重渲染，所以实际性能影响几乎可以忽略——除非这个操作被高频触发（比如每秒几十次的滚动、实时输入监听），否则你根本感知不到差异。

3. 该选哪种？ #

如果你的场景是普通的用户操作（比如按钮点击、表单提交这类低频次触发的行为），直接用setMyState(true)完全没问题，代码简洁，性能上也没啥影响。

如果你的操作是高频触发的，或者你就是想严格避免不必要的setState调用，那!myState && setMyState(true)会更合适，能减少一些React内部无意义的处理。

另外，还有种更严谨的写法可以了解下（虽然你这个场景用不上）：

setMyState(prevState => {
  return !prevState ? true : prevState;
});

这种函数式更新的好处是，当状态更新依赖之前的状态时（比如异步场景），能确保拿到最新的状态值，但在你的同步场景下，和条件判断的写法效果一致。

内容的提问来源于stack exchange，提问作者FE-P