开发路径惯性,项目一开始就react-router v6. 并给每个路由组件lazy优化,这时一切正常. 但碰到一些路由组件消耗比较大的时候有几个问题
- react router每次切换组件的时候都是卸载组件而不是css隐藏. 所以每次切换页面的时候,有一个组件渲染比较消耗, 每次路由匹配到这个组件 都需要重新渲染,内部状态无法保存. 了解了一些常规的 route缓存技术,但 npm下载量都不是很高
- suspen fallback 对路由的处理问题. 我的路由组件fallback统一封装是一个loading加载模态图. 每次切换页面都展示loading,体验不是很好. 会造成页面闪烁,特别是ToC场景中体验很差
react router 为什么每次切换组件的时候是卸载未匹配的组件而不是css隐藏
- 内存管理.卸载组件可以释放相关资源,减少内存占用. 如何一直保持组件不卸载可能会出现内存泄露问题
- 性能优化. 卸载不需要的组件可以提高性能
- 符合react的设计思想
总而言之,言而总之. react-router这么做就是为了优化性能,但降低了用户体验. 实际产品中我们更希望的是react-router可以缓存路由, 其次对于长时间不使用的路由缓存进行卸载, 不要让页面内存过高
重新审视了一下整个项目,发现我们每个页面都需要缓存,就感觉没必要用react-router了.只是给内部组件第一次加载进行了lazy优化.然后丢到LRU缓存里面 ,超过5min不使用即清理掉
切换组件可以用隐藏来设置
- 使用状态控制显示和隐藏 父组件维护这个状态
- 条件渲染 boolean &&
- 样式控制 css display none
目前我们项目就是这样控制组件
