React路由与项目实践 | 青训营笔记(倒数第二篇)

63 阅读2分钟

268887689215087350.jpg

课程内容:

1.课程简介

2.路由是什么

3.React—router

4.路由实践

一、课程简介

1.课程收益:

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

二、路由是什么

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

王威老师说:“路由是桥梁,帮助需求方找到供给方,并进行交换。”

浏览器输入一段URL后会发生什么?

903483412756582848.jpg

而在前端发展的过程中,扮演此处的provider角色的节点也在不断地变化。

(偷笑)好的,接下来,让我们跟随前端知名网红小马,一起了解一下那些年我们一起写过的路由~

123090107800129390.jpg

610109558197913795.jpg

373810585339450895.jpg

457779305723660821.jpg

675416519012649144.jpg

51835177759039748.jpg

827846736669048968.jpg

三、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
);

525146901517399080.jpg

774013514125476620.jpg

490684306058308561.jpg

269712512352463630.jpg

580262095673307038.jpg

627365713045423219.jpg

904326164932288826.jpg

915246078138180622.jpg

394965346919887144.jpg

681532872887564306.jpg

四、路由项目实践

158545457855845810.jpg

375481399938318538.jpg

  • 打开任意界面,白屏时间超长
  • js bundle资源超大,静态资源超多
  • 一个旁支页面的变更升级,导致主页直接崩溃
  • 一个SPA应用承载200+页面,巨石应用,变更升级风险更大
  • 页面加载后,数据内容空白时间超长
  • 海量数据接口请求

100492332207892627.jpg

800378570835054705.jpg

833478837665098251.jpg

59714172609111267.jpg

541353954508494975.jpg

345075927385961852.jpg

792056793209018474.jpg

671399253564506213.jpg

287397992960644393.jpg

184156476738269046.jpg

649956762271982758.jpg

五、课程总结

  1. WHAT-路由是什么

  2. WHY-为什么需要路由

  3. HOW-路由怎么解决我们的问题的

  • 路由的演变

  1. 静态网站

  2. 动态网站

  3. 前后端分离

  4. 单页应用

  5. Now

  • react-router原理:

  1. react-router原理概览

  2. hashRouter与BrowserRouter的差异

  • 路由项目实践:

  1. 如何结合路由做项目瘦身
  2. 如何结合路由提升页面渲染性能

以上就是本次学习笔记的全部内容了,感谢大家的阅读~

161401947560621878.jpg