🌹🌹🌹bro，AntD 6.0.0 来了

写前端写久了，我们对 UI 组件升级这事似乎再熟悉不过------

但只要一升级大版本，你就会发现：

它像在考试，你像在裸奔。

AntD 6.0.0 发布之后，

我一边看更新日志，一边感觉官方在说：

"我们这次真的没乱改 API（大部分）......

至于改了的部分，你再忍忍吧。"

这篇文章算是我对 6.0 版本 的一次"补坑 + 吐槽 + 解析"合集：

系统地串起本次升级到底动了哪些刀子、砍在你哪里、如何避免当场去世。

看完你会更清楚：

• AntD 6到底改了什么
• 哪些会影响你项目
• 哪些会让你怀疑人生
• 哪些会让你想尊敬作者
• 以及为什么你要升级

---

一、从 6.0 开始：AntD 终于把旧锅清干净了

每个 UI 框架大版本的第一件事就是：

清垃圾。

这次 AntD 6 做了 4 类大收拾：

① 彻底移除 IE ------ 终于

IE 死透了之后，AntD 也不装了：

• reset.css 不给 IE 面子了
• 构建目标提升
• 各种兼容性逻辑直接移除

一句话：

以后再有客户说要兼容 IE，就让他自己兼容自己。

---

② 清退废弃 API

比如：

• Dropdown.Button：直接没了
• Icon 占位组件：没了
• BackTop：没了
• List 组件：整段 remove

这些组件早就劝你不用了，

你不用，官方就把它"自然淘汰"了。

---

③ React 19：默认支持

React 19 一堆 break change。

但 AntD 官方一句：

"我们全都处理好了。"

非常稳。

---

④ 内部库大换血

classNames → clsx

copy-to-clipboard → 移除

一句话版本：

AntD 6/ 不只是 UI 组件升级，

是整个底层工程体系换代。

从现在开始，你用 AntD 的项目才算"站在 2025 年前端的主流线上"。

---

二、ConfigProvider：从"老好人"变成"全村指挥中心"

AntD 6 里 ConfigProvider 已经不是个配置组件了，

而是 中央政务大厅。

什么都归它管。

比如：

• Table 的 rowKey
• Tooltip / Popover / Popconfirm 的箭头
• Card.Meta 的样式
• Space 的 root
• Modal 的按钮属性
• 全局主题 token
• zeroRuntime 关闭 CSS-in-JS
• tooltip.unique 支持平滑移动

简单说：

以前你在每个组件上写 props，

现在你在 ConfigProvider 一次性"拍板"。

这次更新官方主打一件事：

"所有配置，能收敛就收敛，别让你每个组件都粘粘糊糊地写 props。"

这一点给我一种非常舒服的感觉。

就像写一个业务页面时终于不必：

<Tooltip arrow={{ pointAtCenter: true }} />
<Popover arrow={{ pointAtCenter: true }} />
<Popconfirm arrow={{ pointAtCenter: true }} />

现在直接：

<ConfigProvider
  componentSize="middle"
  tooltip={{ unique: true }}
  popover={{ arrow: { offset: 6 } }}
/>

UI 管理这事终于逻辑清晰了。

---

三、性能优化：这波是真的有感

AntD 每次说"优化性能"，

我都会下意识怀疑：

"你是不是只是把一个变量换了个名字。"

但这次是真的狠。

比如 Tooltip 优化开发模式性能，官方说：

提升大约 40%

40% 是什么概念？

就是你在调试 Tooltip 的时候，延迟从"卡得你怀疑人生"变成"至少不卡了"。

Form 也优化了大量字段卸载时 useWatch 的性能。

Form 重、复杂，一直是大家吐槽对象，

现在能感受到明显顺滑。

---

四、新组件：Masonry 瀑布流

没想到 AntD 终于把瀑布流组件给补上了。

而且不是什么半吊子，

是真的独立组件 Masonry ，

自带：

• 自动排布
• 响应式
• 插槽
• 逻辑位置支持（RTL）

一句话：

再也不用自己写 column-count hack 或者用三方库了。

瀑布流终于不是前端黑魔法了。

---

五、组件语义化结构：前端生态卷到头了（重点）

这是 Ant Design 6.0 的魂。

是整个大版本最重大的变革。

如果你没升级 6，但你是写 AntD 的，这段必须看。

AntD 把所有组件的 DOM 结构统一成一种语义化结构规则，例如：

• icon
• header
• container
• actions
• meta
• wrapper
• content
• control
• list
• panel

以前组件之间 DOM 结构差异巨大，

写样式像在开盲盒：

• 有时候叫 .ant-card-body
• 有时候叫 .ant-card-content
• 有时候是 inline 样式压不下去
• 有时候 className 名字长得像报错日志

统一语义化之后：

• DOM 结构可预测
• className 可枚举
• 定制能力统一
• 样式覆盖清晰
• configProvider 遍历配置变得可能
• 个性化主题更可控

更绝的是：

官方搞了"语义结构生成函数"

也就是说 DOM 结构不是写死的，

而是通过 props 动态生成。

你可以理解成：

AntD 的 DOM 是"模板 + 逻辑"，不是"硬写在源码里"。

这代表什么？

→ 更灵活的主题

可以随便改节点结构。

→ 更易维护

以后搞一个"大型企业主题改造"，你不会改到吐。

→ 更易适配 RTL、多语言

逻辑位置直接跟着结构走。

→ 更容易写自动化 UI 测试

因为 DOM 结构更可预测。

语义化结构本质是在说：

"AntD 的 DOM，我们终于不再乱搞了。"

---

六、逻辑位置（logical placement）：从 left/right 到 start/end

AntD 全面替换：

• left → start
• right → end
• expandIconPosition → expandIconPlacement
• pagination.position → pagination.placement
• dotPosition → dotPlacement

为什么？

因为为了 RTL（阿拉伯语等） 。

以前 RTL 要：

• 改方向
• 改布局
• 改翻转图标
• 写一堆 override CSS

现在你只写：

placement="start"

浏览器自然判断方向。

这是国际化大厂常用的布局写法，

AntD 这次完全对齐了未来趋势。

---

七、一堆"终于支持了"的功能

这次更新日志很长，但我总结一下：

✔ Drawer 支持拖拽大小（resizable）

这功能多少人自己 hack 过？

✔ DatePicker 加预览值（hover preview）

巨实用。

✔ Pagination 输入框只能输入数字

谢谢你们终于发现用户不是工程师。

✔ Cascader 支持 aria- /data-

可访问性终于跟上。

✔ Tag 支持 disabled / href

以前 Tag 想当链接自己写半天。

✔ Modal / Image 遮罩支持模糊

UI 更现代。

✔ Notification 支持自定义进度条颜色

意味可以做渐变主题。

✔ Alert closable 支持回调

总算可以「关闭动画结束再干活」了。

✔ Segmented 支持 tooltip

这终于成"按钮组"而不是"看上去像按钮的东西"。

✔ Splitter 自定义拖拽图标

重度后台 UI 的福音。

一句话：

AntD 6 加的不只是新功能，而是"实现了以前你以为它早就有的功能"。

---

八、CSS 变量 & zeroRuntime：样式体系升级

AntD 6 的主题系统真正步入现代化：

√ 默认使用 CSS variables

终于从 emotion / css-in-js 中解放一部分性能。

√ 新 token：colorBorderDisabled

一致的禁用状态样式。

√ zeroRuntime

完全禁用 css-in-js，

也就是 ------

样式只靠 CSS，不靠 JS 动态生成。

你可以：

• 减少 JS 包体积
• 减少样式计算开销
• 加速 SSR
• 加速 hydration

AntD 6 的主题系统已经接近 Tailwind / Radix 那种"现代架构"了。

---

九、为什么我推荐升级？

你可能会问：

"那 6.0 值得升级吗？项目会不会炸？"

非常诚恳的回答：

值得，也不会那么炸。

原因：

① 95% 以上 API 是平滑升级

破坏性更新都集中在：

• 废弃组件
• 部分位置 API
• 样式结构变化

业务层代码影响小。

② 性能是真的提升

不仅仅是理论。

③ 现代化工程趋势

写 AntD 6 的项目，

你整套结构、体验都比以前"干净一大截"。

④ Theme & DOM 语义化结构是质变

未来大项目会非常依赖它。

---

十、写在最后：当你再看"AntD 更新日志"

AntD 从 4 → 5 → 6 的过程里，

可以看到这套设计体系从"能用" → "好用" → "可扩展"的完整升级链。

6.0 明显把重点从"功能性组件"转向了"工程体系完善"：

• 语义化结构
• CSS 变量
• zeroRuntime
• 全局配置体系
• RTL 逻辑位置
• 全量优化性能
• 更易维护
• 更深度主题化

这次是一次真正意义上的"大版本重构"，

不是换皮。

作为前端工程师，我们当然可以继续：

复制 UI → 调接口 → 写页面 → 交付上线。

但如果你真的想变强，

你需要知道：

• 框架为什么这样设计
• DOM 结构为什么要语义化
• 为什么 UI 库要用 RTL
• 为什么 CSS-in-JS 要被部分取代
• 为什么配置要靠 provider 收敛
• 为什么组件属性要统一成 placement

这些"看起来只是升级日志的小点"，

背后都是前端生态发展的方向。

别再说"写 UI 没技术含量"这种低情商话了。

UI 库的技术含量，你甚至想象不到。