CV大师|青训营笔记

通过这篇文章，你会学到React -Router中的 BrowserRouter，HashRouter， 以及 微前端，路由实践的问题， 原因和解决方案。最后你会了解到lazy+suspense是什么怎么用，通过目录查看你所需要的

React -Router

BrowserRouter

• BrowserRouter是React Router v4中的一个重要组件，用于实现基于浏览器History API的路由管理

下面是一个使用BrowserRouter实现路由的示例代码：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

1. BrowserRouter包含了三个Route组件，分别对应着三个页面（Home、About、Contact）
2. exact属性用于精确匹配路径
3. Switch组件用于确保只有一个Route组件被渲染

history 感知url的变化，更新组件

---

HashRouter

• HashRouter是React Router v4中的另一种重要路由管理组件，用于实现基于URL哈希值的路由管理
• 与BrowserRouter不同，HashRouter使用URL中的哈希值（#）来实现路由，而不是浏览器History API

例如“/#/home”、“/#/about”等 操作同BrowserRouter

---

很有意思：

---

微前端

• 路由实践的问题

1. 打开页面，白屏时间超长
2. 一个旁支页面的更新升级，导致主页面直接崩溃
3. 页面加载后，数据内容空白时间超长

• 原因

1. js bundle 资源超大，静态资源太多
2. SPA应用承载200+页面，巨石应用，变更升级风险极大
3. 海量数据接口请求

• 解决

1. 应用瘦身&切割
2. 解决数据加载，前端数据处理耗时

---

什么是微前端？

• 微前端（Micro Frontends）是一种架构风格，它将前端应用程序拆分成多个小型、独立的部分，每个部分都可以由不同的团队开发、构建和部署
• 这些部分可以独立地运行、升级和扩展，同时又可以无缝地集成到同一个页面中，形成一个完整的前端应用程序

lazy+suspense

• lazy 是一个高阶组件，用于实现组件的懒加载 如何使用:

const MyComponent = lazy(() => import('./MyComponent'));

• Suspense 是 React 16 中引入的新特性，用于实现异步数据的加载和错误处理

使用 Suspense 可以解决这个问题，可以让组件在等待异步数据时显示一个自定义的 loading 界面，从而提高用户体验

<Suspense fallback={<Loading />}>
  <MyComponent />
</Suspense>

• lazy 和 Suspense 可以一起使用，用于实现组件的懒加载和异步数据的加载
• 具体的实现方式是将需要懒加载的组件通过 lazy 进行加载，然后将其包裹在 Suspense 组件中，并在 fallback 中指定一个 loading 界面即可

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <MyComponent />
      </Suspense>
    </div>
  );
}