基于当前状态计算新状态时，是否应始终使用函数式setState？

嘿，这个问题问得特别实在——很多刚上手React的同学都会在这两种写法之间纠结。咱们先把底层逻辑掰明白，再看什么时候该用哪种。

首先得搞清楚两种写法的核心区别：

1. 常规写法（直接传对象） #

this.setState({ ...this.state, isOn: !this.state.isOn });

这种写法是直接基于当前的this.state来计算新状态，但有个容易踩的坑：React的setState是异步批量更新的。也就是说，当你调用setState后，this.state不会立刻更新，如果在同一个事件循环里有多个setState调用，你拿到的this.state可能还是旧值，这时候计算出来的新状态就会出错。

2. 函数式写法（传更新函数） #

this.setState(currentState => ({ isOn: !currentState.isOn }));

这种写法是给setState传一个函数，React会自动把当前最新的状态作为参数传给这个函数，你基于这个确定的最新状态来计算新值，完全避开了异步更新导致的状态过期问题。

该怎么选择？ #

给你一个简单的判断原则：

• 如果你的新状态不需要依赖之前的状态（比如直接设置固定值：this.setState({ isOn: true })），那用常规写法就够了，简单直接。
• 如果你的新状态必须基于之前的状态计算（比如切换开关、计数器累加、数组追加元素这类操作），那一定要用函数式写法！尤其是当你可能在短时间内多次触发setState的时候，函数式写法能保证每次都拿到最准确的状态，避免出现莫名其妙的bug。

举个直观的例子：假设你做一个计数器，连续点击两次按钮：

• 用常规写法的话，两次更新都会基于初始的旧值计算，最终结果会不符合预期：

// 初始count = 0
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// 最终count = 1，而不是预期的2

• 用函数式写法的话，每次都基于最新状态计算，结果完全符合预期：

this.setState(current => ({ count: current.count + 1 }));
this.setState(current => ({ count: current.count + 1 }));
// 最终count = 2

回到你这个切换器的场景：虽然单次点击时两种写法都能正常工作，但更推荐用函数式写法——一来它是React官方推荐的最佳实践，二来万一以后你在同一个事件流程里加了其他setState操作，不会因为异步更新的特性出问题，容错性更强。

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