# 前言

single-spa-react 是一个辅助库，它可以帮助React应用程序实现 single-spa 需要的命周期函数（bootstrap、mount 和 unmount）。请查看 single-spa-react github

# 安装

npm install --save single-spa-react
# or
yarn add single-spa-react

另外，您也可以通过添加 <script src="https://unpkg.com/single-spa-react"> 并访问全局变量 singleSpaReact 来使用 single-spa-react

这里我更建议使用 npm init single-spa --framework react 脚手架安装，对于初学者来说会省很多事情

安装完成后的提示在之前的章节有过讲解了，就不多做赘述了

项目的初始化的目录结构基本就是下图：

# 项目结构

# 入口文件（spa-spa.js）

这里的名字是根据在安装过程中，通过 Organiztion name 和 Project name 组合而成的，上面安装的时候我就是随便起的名字就是 spa 和 spa，所以成的就是 spa-spa，名字是 O-P 的结构

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Root from "./root.component";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

最主要的是使用了 singleSpaReact 这个 react 的微应用库，用于创建一个微应用对象：

参数接收一个对象：

• React (必填)
• React DOM (必填)
• rootComponent (必填) 将被渲染的顶层React组件。只有在提供了 loadRootComponent 的情况下才可以省略。
• loadRootComponent：(可选) 一个加载函数。由 parcel 触发用来获取自定义 single-spa 属性 的loading 方法，返回值为 Promise。 如果如提供了此选项，它将取代 rootComponent 选项。它的目的是为了帮助那些想要懒加载根组