基于React+Antd的多Tab架构

背景

企业后台布局常采用多tab的方式，便可经过不一样tab之间的切换访问已打开的页面，以下图所示。后台管理系统中一种常见的场景为从列表页到详情页展现，多tab的形式可以更好的知足这种业务场景，尤为在不一样的tab页有对比的状况下。

实现方案

使用react-router的方式实现

咱们能够经过每一个标签记录不一样的路由的形式，即<tab, url>键值对的形式，记录该标签对应的路由，点击不一样的标签时，在Content区域渲染相关的路由对应的组件来实现多tab。

可是这种方案有一个问题没法绕开，那就是react-router是根据url来渲染单个组件的，没法缓存已渲染的组件，这就意味着在点击标签时，对应的子组件每次都是从新渲染，没法保存上次对应的状态（React-router原理）。这对于纯展现类的场景影响在可接受范围内，如标签对应的是新闻详情页，即便刷新也无大碍。但对于某种场景则存在很大的问题，如输入型场景中，我在标签1中输入了部份内容，以后切换到标签2中去查询某个数据，再回到标签1中，刚才输入的数据项则丢失。

若是React-router能够缓存组件，即可解决这个问题。经过查询react-router文档发现并不支持，react中也没有像vue中keep-alive的机制。业界中有react-keeper的路由方案代替react-router解决组件的缓存问题。

基于JQuery的方式实现

在React没出现以前，在JQ中如何实现这种形式的呢？用JQ的方式是比较容易实现的，只须要将标签对应的内容的css设置为{display: block}，其余标签对应的内容css设置为{display: none}便可。

基于Antd Tab组件实现

Antd tab组件实现了上述所说的JQ相似的功能，示例以下：

import {Tabs, Button} from 'antd';
const {TabPane} = Tabs;
ReactDOM.render( <
    <Tabs activeKey="1" >
        <TabPane tab = "Tab 1" key = "1" >Content of tab 1 </TabPane> 
        <TabPane tab = "Tab 2" key = "2" >Content of tab 2 </TabPane> 
        <TabPane tab = "Tab 3" key = "3" >Content of tab 3 </TabPane> 
    </Tabs>,
    mountNode,
);
复制代码

activeKey对应的TabPane会呈现，其余TabPane则会隐藏掉。

首先设计Tab的数据结构：

{
    name,  // 该标签名称
    component, // 标签对应的组件
    props， // 组件须要的属性
}
复制代码

在全局状态中增长:

// 全局标签列表
{
    tabs: [] // 全局tabs
}

// 对应的操做
export const ADD_TAB = 'ADD_TAB';
export const REMOVE_TAB = 'REMOVE_TAB';
export const UPDATE_TAB = 'UPDATE_TAB';
export const CHANGE_TAB = 'CHANGE_TAB';
export const CLEAR_TAB = 'CLEAR_TAB';
复制代码

标签的新增，关闭，更新等对应的就是tabs数组的以上操做。

代码以下：github.com/simonwoo/mu…

效果以下图：