路由概念
路由本意是一种负责寻址的网络设备,它在互联网络中从多条路径中寻址通讯量最少的一条网络路径提供给用户通信.路由用于连接多个逻辑上分开的网络,对用户提供最佳的通信.
而前端的路由是在页面输入url后,通过解析url,然后路由匹配,再返回结果得到的.
前端页面发展史
静态页面->动态页面(Asp,Jsp,Php)->前后端分离(Ajax)->单页应用(MVC/MVVM Framework)->SSR/SSG/微前端
而页面也又Server路由请求到Server+前端路由
而后者这一部分需要后台做相应的配置,即React-Router里的BrowserRouter需要后台做相应的匹配,而HashRouter则不需要.
React-router
这部分,老师介绍了react-router-dom,react-router,History这三部分
react-router-dom这部分负责与页面渲染打交道,react-router与我们写的react代码相关,History是浏览器内置的api,能拿浏览器的History这部分的数据~
而BrowserRouter和HashRouter是react-router里的两部分,前者是基于History,然后需要服务器做相应的转发处理,而后者是基于Hash就不需要在服务器做配置
而History这部分,有MemoryHistory,BrowserHistory,HashHistory这三部分,前者是在ReactNative里的,而后者是在浏览器.
History通过传props给Router,然后Router再setState改变ContextProvider,而Route(ContextConsumer)拿到state,再前端路由url match,然后更改组件内容
项目瘦身
- 应用开发,构建瘦身与切割(将大量页面的单SPA应用拆分成十个子SPA应用)
- Import+Lazy+Suspense 动态import搭配lazy划分模块,suspense包裹动态导入组件,fallback渲染加载时UI
- 路由也分为声明式路由和文件系统约定式路由(通过文件目录来配置)
结语
听完王老师的课,收获是解决了我之前对使用BrowserRouter,后台需要单独配置的疑惑,还有对react-router-dom,react-router,History这三者各自负责的功能有了更清晰的理解.
