react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新

一、前言

最近因为项目要求，开始学习并且使用React和Ant Design框架。在前端开发过程中，遇到这样一个页面：有多个tab，每个tab下都是一个table表格来进行数据展示。但，每个table的title都是一样的，如何进行表格的渲染和对应数据的展示就值得开发人员考虑。下面，我们一起来瞧瞧。

二、性能优化和逻辑分析

2.1、性能优化

在开发中，最大程度上对性能进行优化，是开发人员的不懈追求。对于前端开发而言，操作尽可能少的DOM的，是页面性能优化的一个重要部分。
为什么这样说呢，来看看下面这个简化版的，浏览器输入url到网页显示的整个过程就明白了：

• 浏览器输入url并回车
• 域名解析
• 发起TCP三次握手
• 发送HTTP请求
• 服务端响应请求，浏览器得到html代码
• 浏览器解析html代码，并请求html代码中的资源
• 页面渲染呈现给用户

“页面渲染呈现给用户”这最后一步，又是这样一个过程：

• 浏览器把获取到的html代码解析成1个DOM树，html中的每个标签都是DOM树中的一个节点，根节点就是document对象。DOM树中包含了所有html标签
• 浏览器解析所有样式（解析成样式结构体：CSSOM树），在解析的过程中去掉浏览器不能识别的样式
• DOM树和CSSOM树组合后构建render tree
• 等render tree构建完成后，计算像素坐标等一些列准备工作
• 浏览器根据