关于React中不同setState回调写法的等效性与差异问询

让我把这两个问题拆解清楚，帮你搞懂React setState回调的正确用法~

答案是完全不等效，核心区别在于你传递给setState的第二个参数本质是什么：

• 第一种写法() => function()：你传递的是一个箭头函数作为回调。当setState完成状态更新、组件重新渲染后，这个箭头函数才会被执行，进而调用里面的function()。这是符合setState回调预期用法的——回调会在状态更新完成后触发，能拿到最新的组件状态。

• 第二种写法function()：这里你不是传递函数引用，而是立即执行了function()，把这个函数执行后的返回值（如果function没有明确返回值，就是undefined）传给了setState的第二个参数。setState期望第二个参数是一个函数，如果你传了undefined，这个回调就相当于没传，不会在状态更新后执行任何逻辑。而且function()会在调用setState的当下就立刻执行，和状态更新完全不同步，此时访问的还是旧状态。

举个具体的例子：
假设我们有一个函数logCurrentState：

const logCurrentState = () => console.log(this.state.key);

• 用setState({key: 'newVal'}, () => logCurrentState())：状态更新完成后，控制台会打印newVal，符合预期。
• 用setState({key: 'newVal'}, logCurrentState())：调用setState的瞬间就会执行logCurrentState()，此时状态还没更新，控制台会打印旧的key值，而且状态更新后不会再触发任何操作。

当然有差异，本质和上面的问题是同一个逻辑，再给你明确梳理：

• setState({key: value}, myFunction())：这里myFunction()是立即执行的，它的返回值会被当作setState的回调。如果myFunction没有返回一个函数，那这个回调就完全无效。而且myFunction的执行时机是在调用setState的那一刻，和状态更新完全无关——此时组件状态还是旧的，你拿不到更新后的值。

• setState({key: value}, () => myFunction())：这里你传递的是一个箭头函数作为setState的合法回调。当setState完成状态更新、组件重新渲染后，箭头函数才会被调用，进而执行myFunction()。这时候myFunction里访问的状态已经是更新后的了，完全符合setState回调的设计目的——用于在状态更新后执行依赖新状态的逻辑。

额外补充：如果myFunction本身就是你要作为回调的函数，其实更简洁的写法是直接传函数引用：setState({key: value}, myFunction)（注意不要加括号！）。这样和() => myFunction()的效果是一样的，除非你需要给myFunction传递额外参数，这时候箭头函数的写法就派上用场了，比如() => myFunction(arg1, arg2)。

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