正文

学习React微前端，Qiankun框架实战代码示例解析

/0 浏览量
1012

在当今的前端开发领域，微前端架构因其模块化、可复用性和独立部署的优势而备受关注。React微前端架构，特别是Qiankun框架，已经成为实现微前端架构的流行选择。本文将深入解析Qiankun框架的实战代码示例，帮助读者更好地理解和应用微前端技术。

一、Qiankun框架简介

Qiankun是一个基于React的微前端框架，它允许开发者将多个独立的React应用组合成一个更大的应用。Qiankun框架的核心功能包括：

  • 主应用（Host App）：负责管理多个子应用的生命周期，如加载、卸载、更新等。
  • 子应用（Sandbox App）：独立的React应用，可以在主应用中运行。
  • 沙箱（Sandbox）：为子应用提供隔离的环境，确保子应用之间不会相互影响。

二、搭建主应用

首先，我们需要创建一个主应用。以下是一个简单的示例：

import React from 'react';
import { render } from 'react-dom';
import { registerMicroApps, start } from 'qiankun';

const renderApps = () => {
  registerMicroApps([
    {
      name: 'app1', // 子应用名称
      entry: '//localhost:7001', // 子应用入口
      container: '#container', // 子应用挂载的容器
      activeRule: '/app1', // 激活规则
    },
    {
      name: 'app2',
      entry: '//localhost:7002',
      container: '#container',
      activeRule: '/app2',
    },
  ]);

  start();
};

render(<div id="container"></div>, document.getElementById('root'));
renderApps();

在这个示例中，我们首先导入了必要的库，然后定义了一个renderApps函数。该函数使用registerMicroApps方法注册了两个子应用，并指定了它们的入口、容器和激活规则。最后，我们使用start方法启动微前端架构。

三、搭建子应用

接下来，我们需要创建一个子应用。以下是一个简单的子应用示例：

import React from 'react';
import ReactDOM from 'react-dom';

const render = () => {
  ReactDOM.render(<h1>子应用1</h1>, document.getElementById('root'));
};

render();

在这个示例中，我们导入了必要的库，并定义了一个render函数。该函数使用ReactDOM.render方法将一个简单的标题渲染到root元素中。

四、运行主应用和子应用

现在，我们已经搭建好了主应用和子应用。接下来，我们需要运行它们。首先，启动主应用：

npm run start:host

然后，启动子应用：

npm run start:app1
npm run start:app2

在浏览器中访问主应用的URL（例如：http://localhost:8000），你应该能看到两个子应用分别挂载在主应用的容器中。

五、总结

通过本文的实战代码示例解析，我们了解了Qiankun框架的基本用法。在实际项目中，你可以根据需求调整主应用和子应用的配置，实现更复杂的微前端架构。希望本文能帮助你更好地掌握React微前端和Qiankun框架。

-- 展开阅读全文 --