# micro-web-react-base

**Repository Path**: peryl/micro-web-react-base

## Basic Information

- **Project Name**: micro-web-react-base
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-01-23
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端架构BASE工程

## 子应用渲染的几种模式

### render

- 继承Base应用的组件上下文，所使用的基础依赖比如React，ReactDOM以及组件库都全部来自于Base应用，继承Base应用的组件上下文；
- 子组件需要设置微前端配置microConfig中separate为空；这样主应用在加载子应用index config以及main config的时候就不会创建iframe来加载；
- 优点是能完全使用Base应用所提供的组件以及工具函数；
- 缺点是不可以隔离window全局变量以及样式；
- 子应用在main init函数中通过调用setRender函数来控制渲染内容；

### custom

- 设置microConfig 的separate为frame，主应用再加载子应用的index config以及main config的时候创建一个iframe来加载这些脚本；
- 子应用自己挂载；
- 优点是能完全隔离全局变量以及样式；
- 缺点是不能完全使用主应用的所创建的组件以及工具函数，可以使用一些基础的依赖比如React，ReactDOM，Vue等等；组件库不可以共用同一个对象，但是子应用可以自己从Base应用的静态资源中加载一遍组件库依赖；
- 子应用在main init函数中手动挂载内容，比如ReactDOM.createRoot来渲染子应用内容；