01 笔记概要

学习目标：

了解路由的演进历史&原因
了解React-Router的原理
复杂前端应用里结合路由的实践

02 那些年写的路由

路由的定义——路由是什么？

路由(Router)是一种负责寻径的网络设备，它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信，路由用于连接多个逻辑上分开的网络，为用户提供最佳的通信路径。

路由是桥梁，帮助需求侧找到供给侧，并进行交换。

经典问题：浏览器输入一段URL (Uniform Resource Locator，统一资源定位符) 后会发生什么?

通常回答：浏览器输入URL后，会经历以下过程：

浏览器会解析URL，将其分成三个部分：协议（如HTTP，HTTPS等），域名或IP地址和资源路径。
浏览器会检查缓存，如果该资源已经在缓存中存在并且没有过期，那么直接从缓存中读取该资源。
如果资源没有被缓存或者已经过期，浏览器会通过DNS（Domain Name System，域名系统）解析获得服务器的IP地址。
浏览器会与服务器建立TCP连接。
一旦建立了连接，浏览器会向服务器发送HTTP请求，请求资源。
服务器接收到请求后，会查找请求的资源并将其返回给浏览器，同时还会附带一些响应头信息，如响应状态码、响应类型、响应长度等。
浏览器接收到服务器返回的响应后，会根据响应类型和资源类型进行解析和渲染。
如果该资源需要进行渲染，浏览器会根据HTML、CSS和JavaScript等代码生成页面。
如果该资源是一个可执行文件，浏览器会下载该文件并执行其中的代码。
浏览器在渲染完整个页面后，会将该页面的状态保存到浏览器缓存中，以便下次访问时可以更快地加载页面。

简图大概是这样的：

正是在前端发展的过程中，此处的Provider角色的节点也在不断地变化。

一起写过的路由……

首先是静态网页的过程

浏览器通过URL向服务方发送请求，路由时间器根据需求拉取资源，然后返回内容、文本、网页……

然后是动态网页的过程

ASP是微软公司开发的一种Web开发技术，它使用VBScript或JScript等脚本语言进行编写，可以与HTML结合使用。 JSP是一种基于Java的服务器端Web开发技术，它允许开发人员使用标准的HTML、CSS和JavaScript等前端技术，并使用Java语言编写动态内容。JSP通常在Java EE服务器上运行，如Tomcat、GlassFish等。 PHP是一种开源的服务器端脚本语言，可以嵌入HTML中使用，以生成动态的Web页面。PHP可以运行在大多数Web服务器上，如Apache、IIS等，并能够与多种数据库系统进行集成，如MySQL、PostgreSQL等。

用PHP写是这样的……

然后是前后端分离过程

Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。blog.csdn.net/chaopingyao…

代码如下：

单页应用过程：

代码如下：

Grunt 是一套前端自动化构建工具，一个基于NodeJs的命令行工具，它是一个任务运行器，配合浏览器丰富强大的插件。MVC（Model View Controller）是软件工程中的一种软件架构模式，它把软件系统分为模型、视图和控制器三个基本部分。MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。 Bundle（捆）。

03 React-router

一些Reat路由包的版本和用法

它们各自扮演的角色

大致的过程

浏览器路由和哈希路由的区别：其实主要就是访问的URL类型不同

BrowserRouter 基于History 访问Url形如 www.abc.com/a/b/v

HashRouter 基于Hash 访问Url形如 wwwabc.com/#/

（同上图）

Parser(解析器) Render（供给方）

首先是History这边。 History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录

其中History里面又分为：

MemoryHistory
BrowseHistory
HashHistory

概述如下：

内存历史记录将当前位置存储在内存中。它是为在有状态的非浏览器环境中使用而设计的，如测试和React Native。

浏览器历史记录将位置存储在常规URL中。这是大多数Web应用程序的标准，但它需要在服务器上进行一些配置，以确保在多个URL上提供相同的应用程序。

哈希历史将位置存储在window.location.hash中。这使得您不想以某种原因将位置发送到服务器的情况下可以这样做，因为您不能配置它，或者URL空间是为其他东西保留的。

历史记录是导航堆栈的接口。历史作为当前位置的真实来源，同时也提供了一套可以用来改变它的方法。它类似于DOM的window.history对象，但具有更小、更集中的API。

History会感知URL的变化，或者操作URL。以下是详细代码：

路由匹配这一步：

(同上图)

总路由向各路由分发，集中到包裹路由，感知URL变化，提供Provider供嵌套children消费。

下面这条路由则流向路由匹配，供页面渲染使用。

（话说这代码哪找的呀这是？）

连通Render

History暴露封装后History方法，抹平Hash、History的差异，通过Props流向下一步，Router 延伸RC，具有react生命周期监听History变动，然后通过setState流向上下文提供者，流向调用方，URL匹配，最后通过setState再送给提供者和children。

浏览器路由向哈希路由完结

04 路由实践

什么是SSR？SSR是服务器端渲染。静态网站生成器（SSG），ISR（Incremental Static Regeneration，增量静态再生）,DPR（Device Pixel Ratio）：设备像素比。RPC（Remote Procedure Call）叫作远程过程调用，它是利用网络从远程计算机上请求服务，可以理解为把程序的一部分放在其他远程计算机上执行，核心组成：服务调用方（Consumer），服务提供方（Provider）。 blog.csdn.net/weixin_4155…