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

124 阅读2分钟

一、什么是路由?

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

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

二、什么是路由器?

路由器(Router)是一种特殊类型的组件,它可以将URL映射到相应的组件,并在需要时动态地渲染这些组件

React Router提供了一些高级功能,例如代码分割,动画过渡,滚动恢复,递归路径和服务器端渲染。 代码分割通过将应用程序代码拆分为更小的代码片段,使得页面的初始化速度更快并且更易于缓存。

React-router提供了React.lazy和Suspense组合使用,可以实现在保证可读性的前提下,将代码拆分到几个单独的文件中。

React Router可以支持在路由之间进行动画过渡。这可以通过使用React Transition Group库中的 CSSTransition和TransitionGroup组件来实现。CSSTransition组件允许您在组件进入或退出DOM时应用动画,而TransitionGroup组件允许您对列表中的项进行动画处理。

使用React Transition Group库,可以实现各种动画效果。例如,可以创建淡入淡出,滑动,缩放,旋转等过渡效果。这些效果可以通过编写CSS动画并将其应用于CSSTransition组件来实现。

三、路由项目实践

  • 打开任意页面,白屏时间超长
  • 一个旁支页面的变更升级,导致主页直接崩溃
  • 页面加载后,数据内容空白时间超长
  • js bundle资源超大,静态资源超多
  • 一个SPA应用承载200+页面,巨石应用,变更升级风险极大
  • 海量数据接口请求 四、总结: 2202c3a47d45426a925099890c7ced1f~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.awebp