ZTFox-CSDN博客

原创 React 子应用接入 qiankun `initGlobalState` 的状态管理方案对比

摘要：本文分析了在 qiankun 微前端架构下，React 子应用对接全局状态的五种主流方案： Context + useState：零依赖但性能差，仅适合极简场景 Redux：适合复杂状态但模板代码多，包体积大 Zustand（推荐）：轻量（1KB）、API简洁、无Provider嵌套，天然适配 qiankun 同步逻辑 MobX：响应式更新但调试困难，需规范数据流 Jotai：原子化精准更新，适合现代项目核心结论：小型应用用 Context，Redux 适合遗留系统，Zustand 是大多数场景

2026-06-03 00:08:54 357

原创 Vue 子应用接入 qiankun `initGlobalState` 的状态管理方案对比

本文对比了在qiankun微前端架构中Vue子应用处理全局状态的三种方案： provide/inject：轻量但缺乏集中管理，适合极简场景； Vuex：成熟但繁琐，适合已有Vuex的遗留项目； Pinia：Vue3官方推荐，兼具轻量、灵活和调试友好性，是大多数场景的最佳选择。核心建议：明确qiankun全局状态与子应用内部状态的边界单向数据流（主应用下发→子应用消费→通过API回传） Vue3新项目优先采用Pinia，可封装同步逻辑提升复用性三种方案在包体积、调试支持、代码结构等方面存在显著差异，需

2026-06-03 00:07:44 336

原创 Qiankun 全局状态通信

本文介绍了使用qiankun微前端框架的initGlobalStateAPI实现主应用与子应用间通信的方案。主应用通过actions.ts定义全局状态管理API（包括setGlobalState、onGlobalStateChange等方法），并通过props传递给React、Vue、jQuery等不同技术栈的子应用。文章详细说明了各类型子应用的接入方式、API使用方法及注意事项，强调浅合并特性、性能优化、清理监听、类型安全等关键点，适合需要实现微前端应用间状态共享的开发人员参考。该方案支持双向通信，能有效

2026-06-02 23:49:57 298

原创子应用入口地址中的 `//` 解析

//开头的URL称为协议相对URL，能自动继承当前页面的协议（HTTP/HTTPS）。这种写法在qiankun微前端架构中常用于子应用入口配置，主要优势包括：1）避免HTTPS页面加载HTTP资源导致的混合内容错误；2）实现开发/生产环境配置统一；3）减少手动配置错误。开发环境通常配置为//localhost:端口，生产环境则为//域名/子路径。与写死协议的方式相比，协议相对URL能自动适配不同环境，而纯路径写法不被qiankun支持。实际项目中可通过环境变量管理不同环境的入口地址。

2026-06-02 23:46:48 339

原创 qiankun 微前端与 Monorepo 的区别详解

本文对比了前端工程中常用的两种架构方案：Monorepo和qiankun**。Monorepo是一种代码管理策略，用于在同一个仓库中组织多个项目，解决代码共享和依赖管理问题，但无法解决运行时全局污染问题。qiankun是一个微前端框架，通过沙箱机制在运行时隔离子应用，实现独立开发和部署。两者可以结合使用，Monorepo管理代码，qiankun处理运行时组合。核心区别：作用阶段：Monorepo作用于构建时，qiankun作用于运行时。隔离性：Monorepo项目共享全局环境，qiankun提供JS/

2026-05-31 22:51:06 252