React Redux 9.x 在 React Native 中的嵌套组件更新问题分析

在 React Redux 9.x 版本中，React Native 开发者报告了一个关于嵌套连接组件(connected components)状态更新异常的问题。具体表现为：当父组件和子组件都通过 connect 高阶组件连接到 Redux store 时，子组件的 mapStateToProps 有时不会被调用，导致界面不更新。

问题现象

开发者在使用 React Redux 9.1.0 版本时发现，在 React Native 应用中，嵌套的连接组件会出现以下异常行为：

1. 子组件通过 dispatch 修改其状态后，界面没有相应更新
2. 切换到其他标签页再返回后，状态才正确刷新
3. 降级到 React Redux 8.1.3 版本后问题消失

这个问题特别容易出现在 React Navigation 的 Material Top Tabs 导航组件中，当标签页包含嵌套的连接组件时。

问题复现

通过开发者提供的复现项目，可以清晰地观察到以下现象：

1. 当父组件和子组件各自订阅 store 的不同部分时，子组件的更新会被遗漏
2. 只有当父组件的 mapStateToProps 包含了子组件订阅的所有状态时，子组件才能正常更新
3. 在 web 环境下无法复现，问题仅存在于 React Native 中

技术分析

经过深入调查，发现问题根源在于 React Redux 9.x 版本对构建系统的重大变更：

1. 构建工具切换：从 v8 的 Babel 分文件构建切换到 v9 的 tsup 预打包构建
2. 批处理机制变化：React Redux 内部依赖 React 的批处理机制来优化性能
3. 平台特定代码处理：React Native 需要特殊的 .native.js 扩展名文件处理

在 v8 版本中，React Redux 通过 Babel 构建时会保留平台特定的文件结构，React Native 的打包工具能够正确识别和处理批处理逻辑。但在 v9 版本中，预打包的单一文件破坏了这种机制。

解决方案

React Redux 维护团队已经确认了这个问题，并提出了以下解决方向：

1. 恢复平台特定的批处理逻辑：确保 React Native 能够正确识别批处理入口
2. 优化构建配置：调整 tsup 配置以保留必要的平台特定代码路径
3. 简化批处理逻辑：利用 React 18 的自动批处理特性减少对平台特定代码的依赖

对于急需解决问题的开发者，目前有以下临时解决方案：

1. 降级到 React Redux 8.x 版本
2. 确保父组件的 mapStateToProps 包含所有子组件需要的状态
3. 避免在嵌套组件中使用 connect，改用 useSelector

最佳实践建议

为了避免类似问题，建议 React Native 开发者：

1. 逐步迁移到 hooks：优先使用 useSelector 和 useDispatch 替代 connect
2. 谨慎升级：在升级 React Redux 主版本时，充分测试嵌套组件场景
3. 关注组件设计：尽量减少嵌套连接组件的使用，遵循单一职责原则

这个问题凸显了跨平台状态管理库开发中的挑战，特别是在处理不同渲染环境时的细微差别。React Redux 团队正在积极解决这个问题，预计将在后续版本中提供更稳定的跨平台支持。