Redux中子组件mapStateToProps先于父组件render执行是否为预期行为？

这是Redux的预期行为，不属于框架bug。

底层逻辑说明 #

• Redux的store订阅是扁平无层级的：无论组件在React树中的父子关系，所有通过connect、useSelector注册的状态监听，都是直接绑定到Redux store实例上，不存在父组件订阅优先级更高的规则。
• 状态变更后的执行逻辑和React渲染流程是分离的：dispatch触发状态更新后，Redux会先按订阅的注册顺序，依次触发所有仍处于挂载状态的组件的状态选择器（即mapStateToProps、useSelector的回调函数），这个阶段发生在React组件渲染流程之前。此时框架还不知道父组件后续是否会卸载子组件，因此只要子组件当前还挂载，它的mapStateToProps就一定会被调用。
• 你观察到的日志完全符合该逻辑：当value变更为3时，子组件仍处于挂载状态，store更新后先触发它的mapStateToProps，之后才执行父组件的useSelector回调拿到新值3，父组件进入render流程时判断value≥3，直接不渲染子组件，因此子组件不会执行后续的render逻辑。

优化方案 #

如果你的mapStateToProps包含较重的计算逻辑，想要避免这类非必要调用，可以选择两种优化方案：

1. 使用reselect创建带缓存的选择器，就算mapStateToProps被多次调用，只要依赖的state字段没有变化，就会直接返回缓存结果，几乎没有额外性能开销。
2. 在子组件的mapStateToProps中新增父组件用于条件判断的状态依赖，计算前先做分支判断，若满足卸载条件就直接返回空值，跳过后续重计算逻辑。

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