软件技术学习笔记

个人博客,记录软件技术与程序员的点点滴滴。

React微前端实战教程(框架篇)

大系统拆分成微前端之后,为了提升用户体验,都是按需延时加载相关的CSS/JS。微前端框架react-micro-frontend-framework的职责:

  1. 提供微前端APP注册接口。有了注册接口才能让框架反向找到微前端APP的React组件。
  2. 作为整个前端的底座,负责启动React框架、渲染root节点,提供按需渲染某个微前端APP的接口——React中以组件的方式。
  3. 找到相关微前端的资源位置,按照依赖次序加载CSS/JS。
  4. 提供多个微前端之间的通信机制——全局Redux Store。
  5. 提供前端公共库服务——符号导出。

选择React做微前端框架的其中一个原因是:React Router支持动态路由,都是在渲染每层路由组件时判断加载什么内容。而别的路由框架就不是这个样子,有的是静态配置路由,如果它支持Middleware或者Hook机制,还能玩微前端,否则就得重新开发一个路由框架。所以,统一技术栈选择React + React Router,让微前端更加容易落地。

继续阅读→