课程内容:
1.课程简介
2.路由是什么
3.React—router
4.路由实践
一、课程简介
1.课程收益:
- 了解路由的演进历史&原因
- 了解React-Rounter的原因
- 复杂前端应用里结合路由的最佳实践
二、路由是什么
路由(Router)是一种负责寻径的网络设备,它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络,对用户提供最佳的通信路径。
王威老师说:“路由是桥梁,帮助需求方找到供给方,并进行交换。”
浏览器输入一段URL后会发生什么?
而在前端发展的过程中,扮演此处的provider角色的节点也在不断地变化。
(偷笑)好的,接下来,让我们跟随前端知名网红小马,一起了解一下那些年我们一起写过的路由~
三、React-router
代码块:
import React from "react"
import ReactDOM from"react-dom";
import {BrowserRouter as RouterRoute}from"react-router-dom";
ReactDOM.render(
<Router>
<div>
<Route exact path="/">
<Home />
</Route>
<Route path="/news">
<NewsFeed/>
</Route>
</div>
</Router>,
node
);
四、路由项目实践
- 打开任意界面,白屏时间超长
- js bundle资源超大,静态资源超多
- 一个旁支页面的变更升级,导致主页直接崩溃
- 一个SPA应用承载200+页面,巨石应用,变更升级风险更大
- 页面加载后,数据内容空白时间超长
- 海量数据接口请求
五、课程总结
WHAT-路由是什么
WHY-为什么需要路由
HOW-路由怎么解决我们的问题的
路由的演变
静态网站
动态网站
前后端分离
单页应用
Now
react-router原理:
react-router原理概览
hashRouter与BrowserRouter的差异
路由项目实践:
- 如何结合路由做项目瘦身
- 如何结合路由提升页面渲染性能