1. ‌表單聯動監聽：Form.useWatch‌

‌
場景‌：動態表單字段聯動時，避免手動監聽onValuesChange事件。
‌
代碼‌：

const [form] = Form.useForm();
const username = Form.useWatch('username', form);

<Form form={form}>
  <Form.Item name="username">
    <Input />
  </Form.Item>
  {/* 根據username動態顯示內容 */}
  {username && <div>Hello {username}!</div>}
</Form>

‌效果‌：直接通過Form.useWatch獲取字段值，無需手動訂閲表單變化。

2. ‌表格性能優化：虛擬滾動‌

‌場景‌：渲染超長列表（如1000+行數據）時避免頁面卡頓。

‌代碼‌：使用react-virtualized或rc-table內置方案（antd 5.x+）：

<Table
  dataSource={data}
  columns={columns}
  scroll={{ y: 400 }} // 固定高度觸發虛擬滾動
  virtual
  rowKey="id"
/>

‌效果‌：僅渲染可視區域內的行，大幅提升性能。

3. ‌動態主題切換‌

‌場景‌：實現用户自定義主題色（antd 5.x+）。

‌代碼‌：通過ConfigProvider動態修改CSS變量：

import { ConfigProvider } from 'antd';

// 動態修改主題色
const changeTheme = (color) => {
  ConfigProvider.config({
    theme: { primaryColor: color },
  });
};

// 使用
<ConfigProvider>
  <App />
</ConfigProvider>

‌效果‌：無需重新編譯，實時切換主題色。

4. ‌Modal方法式調用‌

‌場景‌：避免手動維護visible狀態。

‌代碼‌：直接通過靜態方法調用Modal：

const showModal = () => {
  Modal.confirm({
    title: '確認操作',
    content: '確定要刪除此項嗎？',
    onOk: () => handleDelete(),
  });
};

‌優點‌：精簡狀態管理代碼，邏輯更集中。

5. ‌上傳組件自定義驗證‌

‌場景‌：限制文件類型/大小。

‌代碼‌：通過beforeUpload攔截非合規文件：

<Upload
  beforeUpload={(file) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      message.error('僅支持圖片文件！');
      return Upload.LIST_IGNORE;
    }
    return true;
  }}
>
  <Button>上傳圖片</Button>
</Upload>

‌效果‌：前端攔截無效文件提交。

6. ‌全局配置國際化‌

‌場景‌：多語言項目快速切換。

‌代碼‌：通過ConfigProvider統一配置：

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';

<ConfigProvider locale={currentLang === 'zh' ? zhCN : enUS}>
  <App />
</ConfigProvider>

‌擴展‌：配合moment.js或dayjs實現日期國際化。

7. ‌封裝自定義Hooks‌

‌場景‌：複用Table分頁邏輯。

代碼‌：

const usePagination = (initialPage = 1, pageSize = 10) => {
  const [pagination, setPagination] = useState({ current: initialPage, pageSize });

  const handleTableChange = (pag) => {
    setPagination(pag);
    fetchData(pag.current, pag.pageSize);
  };

  return { pagination, handleTableChange };
};

// 使用
const { pagination, handleTableChange } = usePagination();
<Table onChange={handleTableChange} pagination={pagination} />;

8. ‌Tooltip防抖處理‌

‌場景‌：高頻觸發的提示組件優化性能。

‌代碼‌：結合lodash/debounce：

import { debounce } from 'lodash';

const DebouncedTooltip = ({ title, children }) => {
  const [visible, setVisible] = useState(false);
  
  const handleMouseEnter = debounce(() => setVisible(true), 300);
  const handleMouseLeave = debounce(() => setVisible(false), 300);

  return (
    <Tooltip title={title} open={visible}>
      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        {children}
      </div>
    </Tooltip>
  );
};

‌總結建議‌

• ‌升級antd 5.x‌：充分利用CSS變量、組件性能優化等新特性。
• ‌善用ProComponents‌：複雜場景（如ProTable、ProForm）可節省80%代碼量。
• ‌按需加載‌：通過babel-plugin-import減少打包體積。

掌握這些小技巧，可顯著提升antd開發效率與代碼可維護性。