React路由与实践| 青训营笔记

148 阅读1分钟

今天学习了React路由的演进历史和原因、原理、复杂前端应用结合路由的最佳事件、写的路由、React-router和路由实践。

那些年我们一起写过的路由

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

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

浏览器输入一段URL(Uniform Resource Locator)后会发生什么?

image.png

image.png

image.png 整体的图:

image.png

React-router

image.png

BrowserRouter和HashRouter

image.png

image.png

React-router-History

image.png

image.png

image.png

image.png

路由项目实践

image.png 如下案例:

打开任意页面,白屏时间超长。原因是:js bundle资源超大,静态资源超多

一个旁支页面的变更升级,导致主页直接崩溃。原因是:现阶段我们一个SPA应用承载200+页面,巨石应用,变更升级风险极大。

页面加载后,数据内容空白时间超长。原因是:海量数据接口请求。

image.png

image.png

总结:

课程总结

  • 路由的演变

    • 静态网站
    • 动态网站
    • 前后端分离
    • 单页应用
    • Now
  • react-router原理

    • react-router原理概述
    • hashRouter与BrowserRouter的差异
  • 路由项目实践

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

学习了今天的课程让我对react路由有了一定了了解,知道了路由的重要性,也明白了学习React路由的原理等。