[React 路由与项目实践 | 青训营笔记]

内容:

• 简介
• 路由
• React-router
• 路由实践

一、路由

路由实际上是一个桥梁，它用于帮助需求方找到供给方，并进行交换。

当我们在浏览器输入一段url后与路由相关的内容

1. parser url：解析url
2. router match：路由匹配
3. response：返回

前端的演进过程

1. 静态网站
2. 动态网站
3. 前后端分离
4. 单页应用
5. ssr/ssg/微前端

经过前端技术的不断发展和演进，路由的职能也慢慢地从后端向前端转移。

二、React-Router

React-Router 是一个用于React应用程序的第三方库，它提供了一种在应用程序中管理路由的方式。通过React Router，可以将应用程序的不同页面映射到不同的URL，并在页面之间进行导航。

router 主要扮演在浏览器侧的 provider 的角色，history 主要负责响应和监听 url 的变化，同时把解析的结果灌注给 router ，router再把结果透传给route，route判断当前解析完的配置是否match当前的路由配置最后再决定是否要渲染。

parser url

匹配路由的第一步，就是进行 url 解析，url的解析通常是由 History 实现的。 History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。也就是它是用于会话记录管理的。在react router中是由 React-router-History 库来实现的。

React-router-History 提供了以下三种接口

• BrowserHistory：使用HTML5的history API来实现路由，可以在URL中使用正常的路径。
• HashHistory：使用URL的hash部分来实现路由，可以在URL中使用#符号
• MemoryHistory：将路由信息存储在内存中，不会改变URL。

React-router-History 实际上也是基于浏览器的 History 做会话堆栈管理的，通过监听 popstate 和 hashchange 事件来感知 url 的变化。再在内部对这些变化进行处理，暴露现有的 url 信息和提供一些方法操作 url。

router match

当 router 解析 url 得到路由信息后，就需要匹配相应的路由，确定渲染的组件。

React-Router提供了三种类型的路由组件：

1. BrowserRouter：对应 BrowserHistory，url 形如：http://www.bac.com/a/b/v。
2. HashRouter：对应 HashHistory。url 形如：http://www.bac.com/#/a/b/v。
3. MemoryRouter：对应 MemoryHistory。

这几个路由组件主要用于包裹路由，感知 url 的变化，提供 history provider 给子组件进行消费。

render

当应用匹配到对应的路由后，接下来就是渲染对应的组件展示给用户了。这个过程是有 Route 组件来完成的。

Route 组件用于定义路由规则，根据当前 URL 匹配对应的组件进行渲染。

import { Route } from 'react-router-dom';
function App() {
    return <div> 
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
    </div> );
}

React-router 的整个生命周期如下：

三、实际应用时可能的问题

项目长时间迭代后可能存在的问题：

• 打开页面白屏时间长 --- js bundle 资源过大，静态资源过多
• 旁支页面的升级导致主页崩溃 --- 单页应用承载过多页面
• 页面加载后数据空白时间超长 --- 数据接口请求过多

解决方案：

• 应用开发、构建、交付粒度需要瘦身&切割
  • 微前端
  • 页面路由懒加载 import() + lazy + suspense
• 解决数据加载、前端数据处理耗时
  • ssr + ssg

四、总结