在中后台管理类系统中，多页签的需求非常普遍，用户常常需要在多个页签内跳转，比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用 keep-alive 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 keep-alive 的功能，所以实现多页签的功能就会变得格外困难。我的项目也遇到了同样的问题，在 2019 年左右做了技术调研和选型，最终选择了 react-router-cache-route，并在此基础上实现了多页签的需求，并稳定运行了 2 年的时间。下面我来复盘一下这次的多页签改造。

一、项目简介

本项目是我现在所在部门的项目，是一个企业级中后台管理系统，包括系统管理、角色权限体系、基于 Activiti 的工作流引擎等很多开箱即用的功能。项目包括前后端，后端是我们部门自研的基于 Spring 的企业级 Java 框架，前端是 React 技术栈，当时还是 v15 版本。React Router 还是 v2 版本。

项目主要对象是提供给科技部门有中后台和流程需求的项目组，基于我们项目提供的基线工程，可以快速搭建工程，在此基础上根据需求进行开发。截止到 2019 年 10 月我离开该项目组，本项目已经服务了行内近 50 个系统。

借着掘金“项目复盘”的机会，回顾自己工作的真实项目。本项目是我进入职场的第一个项目。从研三实习开始到第一个部门结束，一直都在做的项目。我们内部将这种项目称作“滚动开发包”，从名字就能看出来，持续滚动开发就是这个项目最大的特点，而从 2015 年 9 月开始，到 2018 年 7 月，将近 3 年的时间，我的主要工作都是围绕这个项目，是我职业生涯的第一个里程碑，在此进行复盘，希望其中的点滴内容能够帮助到希望进入银行软开的同学们。

一、项目简介

本项目是部门的内部项目管理系统，提供了从项目立项、方案评审、实施、上线到结项的全生命周期项目管理，涵盖了项目管理中的资源、进度、成本、质量等关键维度，学过 PMP 的同学们应该都比较熟悉。

• 项目用户：部门中高管、PMO、行员、外包。
• 项目特点：滚动开发包，需求迭代非常频繁，管理侧改革落地基本都基于本系统；内部系统，用户体验方面要求不高；用户量不大，几乎没有高并发场景；
• 项目缺点：技术栈老旧、前后端未分离、需求变化频繁、缺少业务和技术文档、代码臃肿、开发效率低下；
• 项目类型：采购产品，并根据业务需求进行了多年的迭代开发
• 开发团队：10 左右规模，包括行内的项目经理、技术经理和我，其余开发、测试都为外包。

我入职的时候，行员就我一个开发，还有一个项目经理，一个技术经理。后来加入了祥哥作为技术经理，他是 Java 大牛。团队用了快 2 年的时间，将我们的项目从采购系统逐渐转变为了能够真正完全自主掌控的系统。我在这个项目中做过很多的角色，前后端开发、UI 设计、产品经理、项目经理、DBA、运维、运营、客服这些工作都贯穿在我工作的始终，银行软开的小伙伴对这种一人分饰多角的体验应该比较熟悉。我也通过接近两年的努力，将自己强行掰回了 Web 前端的轨道上来，并重归 Web 前端的正轨。