课程已经结束了,但我因为这几天比较忙,耽误了所以这一篇跳一个课程
咱们就先学路由好了,路由顾名思义:就是路径
路由是桥梁,帮助需求方找到供给方,进行交换 React-router是React.js上应用最广泛的第三方路由库,提供了可定制化的路由组件化设计,还支持多种路由优化实践,包括懒加载、代码分割、缓存页面状态等
一道面试题
浏览器输入 URL 后发生了什么?
- 第1步:地址栏输入地址 当打开浏览器后会创建一个 Browser 进程 ,用户在地址栏中输入文字后,浏览器的 UI 线程(UI thread) 将解析输入的内容,并判断到底是一个 URL 还是普通词语,已决定后续的调用方式。
- 第2步:开始导航跳转 当回车确认的内容为 URL 后,将开启一个 tab 标签页。 同时 网络线程(network thread) 将开始工作:开始 DNS 寻址以及建立 TLS 传输通道。
- 第3步:解析 Response 信息,进行安全检测 根据 Response 信息中的 Content-Type 响应头来判断该数据资源属于哪种 媒体类型,比如:text/html、image/png... ...
- 第4步:开启渲染进程,完成导航跳转
前端路由历经过程
- 静态网站
- 动态网站
- 前后端分离——路由匹配、资源分发
- 单页应用——拆分模块
- SSR、SSG、微前端 (出现路由概念)
React——router
HashRouter和BowserRouter的区别
- BorwserRouter有三种方式(url传值,路由参数传值,以及state)
- HashRouter有两种方式(url传值,路由参数传值)
React-router V4 中BrowserRouter和HashRouter的区别
实际应用:微前端
什么是微前端
微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端架构与框架无关,每个微应用都可以使用不同的框架。 主要用于拆分大型应用,更好维护 兼容历史版本。