为什么Redux action不会中断componentDidMount/useEffect的执行流程？

核心底层逻辑 #

JS是单线程运行的，任何正在执行的同步函数都不会被中途打断，必须等当前函数的所有同步代码执行完毕、执行栈清空后，才会处理后续的任务队列。React的重渲染属于调度任务，不会插入到当前正在运行的同步函数中间执行。

componentDidMount 完整执行流程 #

你给出的示例代码执行顺序如下：

1. 组件挂载完成，componentDidMount 开始同步执行，先调用 this.something()
2. 调用 this.props.someReduxActionThatModifiesAnotherPropInThisComponent()：
   • Redux 同步修改 store 中的对应状态
   • Redux 通知订阅了该状态切片的当前组件需要更新，这个更新请求会被加入React的全局更新队列，不会立刻触发重渲染
3. 继续执行后续同步代码，调用 this.somethingElse()，componentDidMount 执行完毕
4. 当前执行栈清空后，React开始处理更新队列，检测到组件props发生变化，触发重渲染流程：执行render函数、更新DOM、触发componentDidUpdate生命周期

所以this.somethingElse()必然会正常执行，不会被重渲染打断。

useEffect 逻辑对比 #

这一逻辑在useEffect中完全没有差异：
useEffect的回调函数本身也是同步执行的，你在回调中触发的Redux状态更新、或者React自身的setState更新，都会先进入更新队列，等整个useEffect回调的所有同步代码执行完毕后，才会触发重渲染。
举个简单的示例验证：

useEffect(() => {
  console.log('effect开始执行')
  dispatch(modifyUserInfo({name: '新名字'})) // 触发Redux状态修改
  console.log('effect执行结束') // 这行一定会在重渲染前打印
}, [dispatch])

运行后控制台的输出顺序永远是先打印effect开始执行、effect执行结束，之后才会执行组件重渲染的相关逻辑。

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