【技术实现步骤摘要】
本申请涉及信息，尤其涉及一种基于react的多标签页切换方法、系统、电子设备及存储介质。
技术介绍
1、react是由facebook开发并维护的一个用于构建用户界面的开源javascript库。它主要用于构建单页面应用(single page applications，spas)中的用户界面，但也可以用于开发其他类型的界面。
2、在一些系统中，多标签页的需求非常普遍，用户常常需要在多个标签页内跳转，比如填写表单(对应一个标签页)时去查询某个列表(对应另一个标签页)获取一些字段信息再回到表单页面填写。这样的需求在另一用于构建用户界面的javascript库vue中使用keep-alive组件即可实现。但是在react中，路由库react router切换路由后就会卸载组件，而本身并没有提供类似keep-alive的功能。因此，在react中实现多页签切换的功能就会变得格外困难。
技术实现思路
1、本申请的目的在于提供一种基于react的多页签切换功能。
2、第一方面，本申请实施例提供一种基于react的多标签页切换方法。所述方法由用户端执行，所述方法包括：接收从当前标签页切换至目标标签页的用户请求；根据所述用户请求确定所述目标标签页对应的组件是否已被缓存；若确定所述目标标签页对应的组件已经被缓存，则从缓存中获取所述目标标签页对应的组件；若确定所述目标标签页对应的组件未被缓存，则新建所述目标标签页对应的组件，并将所述目标标签页对应的组件写入缓存；以及，基于所述
3、在一些实施例中，所述组件包括组件路由、组件名称、唯一标识、面包屑名称、显示标签页时的图标、激活的菜单项和指示是否隐藏菜单项的字段。
4、在一些实施例中，所述用户请求由用户在当前标签页选择目标标签页对应的组件产生。
5、在一些实施例中，所述用户请求由用户在浏览器地址栏输入目标标签页的标识产生。
6、在一些实施例中，所述方法还包括：响应于用户对已建标签页的选择操作，从缓存中获取所述已建标签页对应的组件；基于所述已建标签页对应的组件从当前标签页切换至所述已建标签页。
7、在一些实施例中，所述方法还包括：响应于用户对已建标签页的关闭操作，从缓存中删除所述已建标签页对应的组件。
8、在一些实施例中，所述方法还包括：响应于用户对当前标签页的刷新操作，确定用户是否设置了对标签页对应的组件进行持久化缓存；响应于确定用户设置了对标签页对应的组件进行持久化缓存，从持久化缓存中获取当前标签页对应的组件，并基于当前标签页对应的组件进行页面初始化。
9、在一些实施例中，所述持久化缓存通过状态管理插件valtio和存储接口localstorage实现。
10、在一些实施例中，所述持久化缓存通过第三方状态管理插件和第三方持久化本地存储接口实现。
11、第二方面，本申请实施例提供一种基于react的多标签页切换系统。所述系统在用户端上实现，所述系统包括接收模块、路由模块和展示模块。所述接收模块用于接收从当前标签页切换至目标标签页的用户请求。所述路由模块用于：根据所述用户请求确定所述目标标签页对应的组件是否已被缓存；若确定所述目标标签页对应的组件已经被缓存，则从缓存中获取所述目标标签页对应的组件；若确定所述目标标签页对应的组件未被缓存，则新建所述目标标签页对应的组件，并将所述目标标签页对应的组件写入缓存。所述展示模块用于基于所述目标标签页对应的组件从当前标签页切换至所述目标标签页。
12、在一些实施例中，所述组件包括组件路由、组件名称、唯一标识、面包屑名称、显示标签页时的图标、激活的菜单项和指示是否隐藏菜单项的字段。
13、在一些实施例中，所述用户请求由用户在当前标签页选择目标标签页对应的组件产生。
14、在一些实施例中，所述用户请求由用户在浏览器地址栏输入目标标签页的标识产生。
15、在一些实施例中，所述路由模块还用于：响应于用户对已建标签页的选择操作，从缓存中获取所述已建标签页对应的组件。相应地，所述展示模块还用于基于所述已建标签页对应的组件从当前标签页切换至所述已建标签页。
16、在一些实施例中，所述路由模块还用于：响应于用户对已建标签页的关闭操作，从缓存中删除所述已建标签页对应的组件。
17、在一些实施例中，所述路由模块还用于：响应于用户对当前标签页的刷新操作，确定用户是否设置了对标签页对应的组件进行持久化缓存；响应于确定用户设置了对标签页对应的组件进行持久化缓存，从持久化缓存中获取当前标签页对应的组件。所述展示模块还用于基于当前标签页对应的组件进行页面初始化。
18、在一些实施例中，所述持久化缓存通过状态管理插件valtio和存储接口localstorage实现。
19、在一些实施例中，所述持久化缓存通过第三方状态管理插件和第三方持久化本地存储接口实现。
20、第三方面，本申请实施例提供了一种电子设备，其包括处理器和存储器，其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行如第一方面所述的基于react的多标签页切换方法。
21、第四方面，本申请提供的一种计算机可读存储介质，其包括程序代码，当存储介质在电子设备上运行时，程序代码用于使电子设备执行如第一方面所述的基于react的多标签页切换方法。
22、第五方面，本申请实施例一种计算机程序产品，其包括计算机指令，计算机指令存储在计算机可读存储介质中；当电子设备的处理器从计算机可读存储介质获取计算机指令时，处理器执行该计算机指令，使得电子设备执行如第一方面所述的基于react的多标签页切换方法。
23、本申请实施例中，当用户要切换标签页时，系统先检查目标标签页对应的组件是否已被缓存。若缓存中已经存在该组件的实例，则系统直接从缓存中获取并展示，避免重新创建组件，从而提高系统性能。若缓存中不存在该组件的实例，则系统创建组件实例并将其添加到缓存中。如此，提供了一种高效的基于react的多标签页切换方法。
24、本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其它优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
本文档来自技高网...【技术保护点】
1.一种基于React的多标签页切换方法，其特征在于，所述方法由用户端执行，所述方法包括：
2.如权利要求1所述方法，其特征在于，所述组件包括组件路由、组件名称、唯一标识、面包屑名称、显示标签页时的图标、激活的菜单项和指示是否隐藏菜单项的字段。
3.如权利要求1所述方法，其特征在于，所述用户请求由用户在当前标签页选择目标标签页对应的组件产生，或者，所述用户请求由用户在浏览器地址栏输入目标标签页的地址产生。
4.如权利要求1所述方法，其特征在于，所述方法还包括：
5.如权利要求1所述的方法，其特征在于，所述方法还包括：
6.如权利要求1所述方法，其特征在于，所述方法还包括：
7.如权利要求6所述的方法，其特征在于，所述持久化缓存通过状态管理插件Valtio和存储接口LocalStorage实现，或者，所述持久化缓存通过第三方状态管理插件和第三方持久化本地存储接口实现。
8.一种基于React的多标签页切换系统，其特征在于，所述系统在用户端上实现，所述系统包括：
9.一种电子设备，其特征在
10.一种计算机可读存储介质，其特征在于，包括程序代码，当所述存储介质在电子设备上运行时，所述程序代码用于使所述电子设备执行权利要求1～7中任一所述方法。
...【技术特征摘要】
1.一种基于react的多标签页切换方法，其特征在于，所述方法由用户端执行，所述方法包括：
2.如权利要求1所述方法，其特征在于，所述组件包括组件路由、组件名称、唯一标识、面包屑名称、显示标签页时的图标、激活的菜单项和指示是否隐藏菜单项的字段。
3.如权利要求1所述方法，其特征在于，所述用户请求由用户在当前标签页选择目标标签页对应的组件产生，或者，所述用户请求由用户在浏览器地址栏输入目标标签页的地址产生。
4.如权利要求1所述方法，其特征在于，所述方法还包括：
5.如权利要求1所述的方法，其特征在于，所述方法还包括：
6.如权利要求1所述方法，其特征在于，所述方法还包括：
...
【专利技术属性】
技术研发人员：田野，孟飞，杨志军，刘佳琦，邱孝璋，肖剑峰，吴浩然，
申请(专利权)人：杉数科技北京有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。