【技术实现步骤摘要】
本专利技术涉及互联网领域，更具体说，涉及一种基于react的单页面内切换标签的方法和系统。
技术介绍
1、在传统的react单页面应用程序开发中，通过采用路由跳转实现不同页面之间的切换。由于是单页面应用，每次只能打开一个页面，用户无法直接得知之前打开了哪些页面，而且，每次切换页面时，都需要重新渲染整个页面，当页面频繁切换时，每次切换都会重新创建和销毁组件实例，导致被销毁的组件的状态会丢失。这种情况可能会引发性能下降问题，而且会使用户体验受到影响。而多标签页面的设计允许用户同时打开多个页面，并且页面相互独立，互不干扰。这种设计提高了用户的工作效率。
2、现有技术实现多标签页面通过window.open函数重新打开一个新的浏览器标签页。使用浏览器的本地存储api（如localstorage）将该页面的数据缓存下来，再次加载页面时进行恢复。如图1所示，当用户点击不同的菜单时，相应的在浏览器新打开一个页面来展示对应菜单的内容，图1中的7个菜单内容浏览器都相应的开启一个页面进行显示。这些打开的菜单的显示内容都被保存在浏览器本地。当用户从菜单7对应的页面切换到菜单3对应的页面时，浏览器相应的从本地存储中调取菜单3所对应的内容，将其重新在窗口进行挂载展示。
3、现有技术虽允许用户同时打开多个页面，并且页面相互独立，互不干扰。但是打开多个浏览器标签页会占用过多内存，导致页面卡顿甚至崩溃。当打开多个页面时，需要存储的信息非常多，切换页面时每个页面都需要记录修改的信息，每个页面记录的信息都不相同。此外使用本地存储保存页面信息
技术实现思路
1、本专利技术提供了一种基于react的单页面内切换标签的方法，确保了浏览器可以只在一个单页面内展示不同菜单（即标题标签）的内容，而无需新建多个单页面来显示不同菜单的内容。从而避免用户在菜单切换时，浏览器需保存所有打开页面的显示数据和状态，进而造成浏览器本地缓存过多以及有一定的数据泄露的风险。
2、第一方面，本专利技术提供了一种基于react的单页面内切换标签的方法，其中包括：
3、预先为单页面内的每个菜单配置唯一的路由和标题标签；
4、当用户通过路由从第一菜单对应的第一标题标签跳转到第二菜单对应的第二标题标签时，判断当前单页面中打开的标题标签中是否含有所述第二标题标签；
5、若当前单页面中打开的标题标签中包含所述第二标题标签，则从react缓存库中调取相应所述第二标题标签的数据进行展示。
6、第二方面，本专利技术提供了本专利技术提供了一种基于react的单页面内切换标签的系统，其中包括：
7、标题标签模块，用于管理为单页面内的每个菜单配置唯一的标题标签；
8、react缓存库，用于存储单页面内每个菜单对应的标题标签的数据，以及存储为单页面内每个菜单配置的唯一的路由；
9、获取模块，用于获取单页面内的菜单对应标题标签的数据，并保存至所述react缓存库；
10、调取模块，用于从react缓存库中调取相应所述第二标题标签的数据进行展示。
11、本专利技术实现单页面内不同标签的切换，避免浏览器打开对个页面占用过多的内存，使得页面卡顿甚至崩溃，提高应用的响应速度。其次本专利技术基于react技术创建react缓存库，库中保存标题标签的数据为reactelement节点。避免浏览器本地保存过多繁杂的静态资源而占用过多存储资源，不仅优化了存储空间的利用，也提高了安全性。
本文档来自技高网...【技术保护点】
1.一种基于React的单页面内切换标签的方法，其中包括：
2.根据权利要求1所述方法，其中所述若当前单页面中打开的标题标签中不包含所述第二标题标签，则根据所述第二标题标签的路由从服务器获取相应的渲染数据进行渲染；
3.根据权利要求2所述方法，其中所述将所述第二标题标签的渲染数据保存在所述React缓存库中之前还包括如下步骤：
4.根据权利要求1所述方法，其中所述当用户通过路由从第一菜单对应的第一标题标签跳转到第二菜单对应的第二标题标签时，跳转之前的第一标题标签的数据被隐藏起来而不展示。
5.根据权利要求1所述方法，其中若用户关掉当前单页面中的任何一个标题标签，则在所述React缓存库中将关掉的所述标题标签对应页面的数据进行销毁。
6.根据权利要求3所述方法，实时监测当前单页面所展示的标题标签的状态；
7.根据权利要求3所述方法，其中所述缓存名单由用户设置；
8.根据权利要求1-7任何一项所述方法，其中所述React缓存库为使用React提供的createContext API创建的全局的上下文；
9.根据权利要求1-7任何一项所述方法，其中通过mobx来存储、关闭删除、打开添加、查找当前单页面中打开的标题标签；
10.一种基于React的单页面内切换标签的系统，其中包括：
...【技术特征摘要】
1.一种基于react的单页面内切换标签的方法，其中包括：
2.根据权利要求1所述方法，其中所述若当前单页面中打开的标题标签中不包含所述第二标题标签，则根据所述第二标题标签的路由从服务器获取相应的渲染数据进行渲染；
3.根据权利要求2所述方法，其中所述将所述第二标题标签的渲染数据保存在所述react缓存库中之前还包括如下步骤：
4.根据权利要求1所述方法，其中所述当用户通过路由从第一菜单对应的第一标题标签跳转到第二菜单对应的第二标题标签时，跳转之前的第一标题标签的数据被隐藏起来而不展示。
5.根据权利要求1所述方法，其中若用户关掉当前单页面中的任...
【专利技术属性】
技术研发人员：柴晴，赵兴国，
申请(专利权)人：上海赛连信息科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。