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

63 阅读1分钟

微信图片_20230507230651.jpg

03React-router

微信图片_20230507231020.jpg react-router-dom更多面向web前端。

微信图片_20230507232216.jpg 管理URL前进后退的是history。决定一个provider(加密服务提供系统)对外提供资源,内部逻辑大概分为三个阶段,第一解析URL,第二把URL跟路由进行一定的匹配,第三rendeer(porser URL→router match→render)。

History第一个环节

history接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。history原始定义是会话管理。history分为memoryhist(没有浏览器的环境下,把整体的URL存在在一个内存里面),browserhistory,hoshhisto(不想让服务端做一些的话,可以做纯前端路由)

总结,history做了两件事,第一件是感知URL的变化,第二件是操作URL。

router match第二个环节

react-router承接。router原始概念: hoshrouter,browserrouter,memoryrouter(前三个做包裹性路由,感知URL变化,提供provider供嵌套children消费),route(路由匹配,页面渲染)

微信图片_20230507235439.jpg

04路由项目实践

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

解决方案:1.应用开发,构建,交付粒度需要瘦身&切割。2.解决数据加载,前端数据处理的耗时。

解决加载慢一系列问题:上realmax做服务端的SSR/SSG.借助BFF做数据提前聚合。

微信图片_20230508002837.jpg