本文基于 Ant Design v6.0.0，记录从 v5 升级到 v6 的全过程，包含新特性解读、踩坑记录与实战建议。
适合正在考虑升级或刚接触 AntD v6 的开发者阅读。
一、升级动机：为什么我从 v5 升级到 v6？
- 🎨 Design Token 全面升级：支持主题切换更丝滑
- ⚙️ 组件性能优化：Table、Select 等高频组件渲染提升 30%
- 🧩 新组件上线：
FloatButton.Group、QRCode、WaterMark - 🔧 官方废弃 legacy 写法：
Form.useForm不再推荐？
二、升级步骤（含踩坑）
1. 安装与初始化
npm install antd@latest
# or
yarn add antd@latest
⚠️ 注意：v6 需要 React >= 18.0.0，Node >= 16.0.0
2. 主题迁移：从 less 到 cssinjs
// app.tsx
import { ConfigProvider } from 'antd';
import React from 'react';
export default () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
borderRadius: 6,
},
}}
>
<MyApp />
</ConfigProvider>
);
🔥 坑点：如果你之前用了
modifyVars，需要手动迁移到theme.token，否则样式不生效。
三、新组件实战：FloatButton.Group 悬浮按钮组
import { FloatButton } from 'antd';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
export default () => (
<FloatButton.Group shape="circle" style={{ right: 24 }}>
<FloatButton icon={<QuestionCircleOutlined />} />
<FloatButton icon={<SyncOutlined />} />
<FloatButton.BackTop visibilityHeight={0} />
</FloatButton.Group>
);
✅ 体验：比手动写
fixed+affix清爽太多，支持响应式。
四、性能对比：Table 组件渲染提升
| 场景 | v5 渲染耗时 | v6 渲染耗时 | 提升 |
|---|---|---|---|
| 1000 条数据 | 320 ms | 220 ms | 31 % |
| 2000 条数据 | 680 ms | 470 ms | 31 % |
测试环境：Chrome 124、Mac M1、React 18.3
五、总结：升级建议
| 场景 | 建议 |
|---|---|
| 新项目 | ✅ 直接上 v6 |
| 老项目 | ⚠️ 逐步迁移，先升级 React 18 |
| 组件库封装者 | 🔍 关注 token 变化，避免样式穿透 |
