使用useMemo解决 切换tab时table的抖动问题

使用 useMemo 可以帮助减少在组件重新渲染时重新计算表格数据引起的抖动问题。当切换 tab 时，表格数据可能会发生变化，导致表格重新渲染，而 useMemo 可以缓存计算结果，只在依赖项变化时重新计算。这有助于提高性能和避免不必要的重新渲染。

import React, { useState, useMemo } from 'react';
import { Tabs, Table } from 'antd';

const { TabPane } = Tabs;

const Component = () => {
  const [activeTab, setActiveTab] = useState('tab1');

  // 将多个数据组织成一个对象，key 对应 tab，value 对应数据
  const dataMap = {
    tab1: /* 数据1 */,
    tab2: /* 数据2 */,
    tab3: /* 数据3 */,
    // ... 可以继续添加更多数据
  };

  // 使用 useMemo 缓存表格数据
  const tableData = useMemo(() => {
    return dataMap[activeTab] || [];
  }, [activeTab, dataMap]);

  const handleTabChange = (key) => {
    setActiveTab(key);
  };

  const columns = [
    // 列定义
    // ...
  ];

  return (
    <div>
      <Tabs activeKey={activeTab} onChange={handleTabChange}>
        <TabPane tab="Tab 1" key="tab1">
          {/* 其他 Tab 1 相关的内容 */}
        </TabPane>
        <TabPane tab="Tab 2" key="tab2">
          {/* 其他 Tab 2 相关的内容 */}
        </TabPane>
        <TabPane tab="Tab 3" key="tab3">
          {/* 其他 Tab 3 相关的内容 */}
        </TabPane>
        {/* 可以继续添加更多 Tab */}
      </Tabs>

      <Table dataSource={tableData} columns={columns} />
    </div>
  );
};

export default Component ;