可以不用 Redux也能实现跨模块高性能状态同步——关键在于模块化状态流设计:按业务边界切分状态、模块自治、通过轻量事件总线和显式指令通信,避免全局广播与全树重渲染。

可以不用 Redux,也能实现跨模块的高性能状态同步——关键在于“模块化状态流”设计:把状态按业务边界切分、每个模块自管自用、只在必要时通信,避免全局广播和无差别重渲染。
按模块边界封装状态与逻辑
每个功能模块(如用户登录、购物车、通知中心)独立维护自己的状态、事件触发器和响应逻辑,不依赖全局 store。例如:
- 用 自定义 Hook + useReducer 封装模块内部状态流转,如
useCartState()返回cartItems和addCartItem等语义化操作; - 模块内状态变更不暴露原始 dispatch,只暴露高阶动作函数(如
checkout()),隐藏 reducer 细节; - 模块间不直接读写彼此状态,而是通过明确定义的“接口事件”通信,比如购物车模块 emit
cart:updated,订单模块监听该事件并更新自身 UI 状态。
用轻量事件总线替代 Context 广播
Context 容易引发全树重渲染,而模块化状态流推荐使用极简事件机制(如 mitt 或原生 EventTarget)做点对点通信:
- 每个模块初始化时创建专属事件实例,或共享一个轻量总线但严格约定命名空间(如
user/profile-updated、cart/item-added); - 监听方只订阅自己关心的事件,发布方只触发明确意图的事件,彻底规避“一个状态变、全树刷”的问题;
- 配合
useEffect清理监听器,防止内存泄漏,比 Context 的 Provider 嵌套更可控。
状态同步靠“显式派发 + 局部更新”
不同模块需要协同时,不追求实时强一致,而是通过“显式同步指令”驱动局部更新:
- 例如编辑器模块修改内容后,不直接改表单模块的 state,而是调用
form.syncWithEditor(editor.getData()); - 表单模块收到指令后,只更新自己关心的字段(如
markdownContent),不触发整个表单重渲染; - 若需响应式联动,可在模块内部用
useMemo或derived state计算衍生值,而非让外部状态穿透进来。
持久化与初始化按模块自治
模块自行决定是否持久化、存哪里、何时恢复,不依赖统一中间件:
- 登录模块可读写
localStorage中的auth_token,启动时自动恢复登录态; - 偏好设置模块用
indexedDB存储用户主题/字体等,加载时异步 hydrate; - 各模块恢复时机可错开,避免首屏卡顿;失败时也不影响其他模块启动。











