玩转React 18微前端：主应用与微应用强强联手

2023-11-13 12:52:19

React 18 和 QianKun：微前端架构的完美搭配

在当今复杂的前端应用时代，微前端架构正迅速成为备受瞩目的解决方案。微前端架构将大型应用分解成较小的、独立的微应用，增强了可维护性、可扩展性和可复用性。

React 18 和 QianKun：强强联手

React 18 是 React 的最新版本，带来了激动人心的特性，包括并发渲染、改进的 Hooks API 和更优的性能。而 QianKun 则是一个流行的微前端框架，旨在简化将 React 应用集成到微前端架构中。

配置 React 18 主应用

安装 QianKun：npm install --save qiankun
创建 React 应用：npx create-react-app my-app
安装 QianKun 到 my-app：cd my-app && npm install --save qiankun
创建主应用入口文件 main.js：

import { createApp } from 'react';
import { registerMicroApps, start } from 'qiankun';

const app = createApp({});

registerMicroApps([
  {
    name: 'micro-app',
    entry: '//localhost:3000',
    container: '#micro-app-container',
    activeRule: '/micro-app'
  }
]);

start();

app.mount('#app');

在 index.html 中添加：

<div id="app"></div>
<div id="micro-app-container"></div>

配置 React 18 微应用

创建 React 应用：npx create-react-app micro-app
安装 QianKun：cd micro-app && npm install --save qiankun
创建微应用入口文件 main.js：

import { createApp } from 'react';
import { initGlobalState } from 'qiankun';

const app = createApp({});

initGlobalState({
  user: {
    name: 'John Doe'
  }
});

app.mount('#app');