实战微前端，从使用qiankun到自写微前端

我本地写的文档，大部分内容我直截了当的截图了。

image.png

image.png

image.png

image.png

image.png

image.png

我根据报错提示进行了调整：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { isInIcestark, setLibraryName } from '@ice/stark-app';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

let w_root;
export function mount(props) {
  w_root = ReactDOM.createRoot(props.container);
  w_root.render();
}
export function unmount(props) {
  w_root.unmount();
}
setLibraryName('microApp');

const root = ReactDOM.createRoot(document.getElementById('root'));
if (!isInIcestark()) {
  root.render(
    
      
    
  );
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import { useEffect } from 'react';

import './App.css';

function App() {
  useEffect(() => {
    console.log('useEffect');
    return () => {
      console.log('unmout');
    }
  })
  return (
    

      我是create-react-app的独立项目
    
  );
}

export default App;

子应用的生命周期感知：顺利在进入的时候打印到“useEffect”, 离开的时候打印了"unmout", 完成将普通的create-react-app 项目成为子应用。

性能优化 性能优化 | icestark

image.png

image.png

image.png

第二步：主应用接入

1. yarn add qiankun

2. index.js 文件 (配置路由)

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { BrowserRouter } from "react-router-dom";
   
   import './index.css';
   import App from './App';
   import reportWebVitals from './reportWebVitals';
   
   const root = ReactDOM.createRoot(document.getElementById('root_main'));
   root.render(
     
       
         
       
     
   );
   
   // If you want to start measuring performance in your app, pass a function
   // to log results (for example: reportWebVitals(console.log))
   // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
   reportWebVitals();
   
   

3. 主应用App.js文件（入口文件）：

   import { registerMicroApps, start } from 'qiankun';
   import { Routes, Route, Link } from "react-router-dom";
   import { useEffect } from 'react';
   
   import './App.css';
   
   
   function App() {
     useEffect(() => {
       registerMicroApps([
         {
           name: 'child', // app name registered
           entry: '//localhost:7001',
           container: '#Child',
           activeRule: 'child'
         }, {
           name: 'about', // app name registered
           entry: '//localhost:7001',
           container: '#about',
           activeRule: 'about'
         },
       ]);
       start();
     }, [])
     return (
       
   
         
   
           headers
         
         
   
           
   
             main
             
   
   
             child
             
   
   
             about
             
   
   
             /
           
           
   
             
               enter
   } />
               main
   } />
               
   } />
               

} />