写在前面

11月22日，Ant Design 正式发布 6.0 版本。

作为一个走过10年的开源项目,这次升级相比5.0来说更加「克制」——没有翻天覆地的API重构,而是聚焦在技术架构的深度优化上。

让我们来看看这次升级到底值不值得跟进,以及背后的技术取舍。

核心升级点

1. React 版本要求提升至 18+

变化:

• 最低支持 React 18,移除了对 React 17 及以下版本的兼容逻辑
• 官方推荐使用 React 19 获得最佳体验
• 静态方法如 Modal.confirm 不再需要额外的兼容代码

实际意义:这是一次技术债的清理。React 18 引入的并发特性和新 Hooks(如 useId)已经成为现代 React 应用的基础设施。移除旧版本兼容代码后,内部实现更加统一,避免了不同版本间的行为差异。

对你的影响:

• 如果项目还在用 React 17 或更低版本,需要先升级 React
• 好消息是如果你已经在用 React 18,升级成本几乎为零
• 可以删除之前为 React 19 兼容性写的 patch 代码(如 @ant-design/v5-patch-for-react-19)

2. 纯 CSS 变量架构

变化:

• 默认启用纯 CSS Variables 模式
• 完全移除了对 IE 的支持
• 支持 zeroRuntime 模式,实现零运行时样式生成

技术背景:Ant Design 5.0 时期引入了 CSS-in-JS,但同时带来了运行时性能开销。6.0 通过 CSS 变量实现了一个巧妙的平衡:

• 多主题共享样式: 同一组件在不同主题下的 CSS 可以复用,只需修改变量值
• 主题切换零成本: 不需要重新序列化样式,切换主题变成了修改 CSS 变量值
• 体积优化: 配合 @ant-design/static-style-extract 可以提前生成静态样式

性能数据:官方提供的基准测试显示,zeroRuntime 模式性能最优,尤其在多主题场景下优势明显。

实际应用场景:

// 启用零运行时模式
<ConfigProvider theme={{ zeroRuntime: true }}>
  <App />
</ConfigProvider>

// 获取 CSS 变量名
const { cssVar: { colorBgElevated } } = theme.useToken();

注意事项:

• CSS 变量模式需要为每个主题设置唯一 key,React 18 中会自动使用 useId 生成
• 如果项目中只有一个 antd 版本,可以关闭 hash 进一步减小体积
• zeroRuntime 模式需要自己导入样式文件

3. 完整的语义化结构

变化:

• 所有组件完成 DOM 语义化改造
• API 统一使用逻辑位置描述(如 start/end 替代 left/right)
• 通过 ConfigProvider 的 classNames 和 styles 统一配置组件内部结构
• 支持函数式动态生成语义结构

实际用途:这是给「定制化需求」打开的一扇门。以前要修改组件内部样式,要么覆盖全局 CSS,要么用 !important 硬怼。现在可以优雅地通过 classNames 精确控制每个部分:

// 创意按钮
<Button
  classNames={{
    root: 'rounded-tr-xl rounded-bl-xl',
    icon: 'rotate-30',
  }}
  icon={<SmileOutlined />}
>
  Ant Design
</Button>

// 赛博朋克风格卡片
<Card
  title="Hello World"
  classNames={{
    root: "bg-green-300/10 text-green-500 border-green-500 rounded-none",
    header: "border-green-500 [box-shadow:inset_0_0_8px_theme(colors.green.500)]",
    body: "[text-shadow:0_0_8px_theme(colors.green.400)]"
  }}
>
  Ant Design loves you!~ (=^・ω・^)
</Card>

配合 Tailwind CSS 的威力:文档中的示例大量使用了 Tailwind 的 utility classes,这意味着你可以在不写额外 CSS 的情况下,快速实现各种定制效果。

函数式配置的想象空间:

const btnClassNames: ButtonProps['classNames'] = ({ props }) => {
  switch (props.type) {
    case 'primary':
      return { root: 'shadow-lg' };
    default:
      return { root: 'shadow-sm' };
  }
};

<ConfigProvider button={{ classNames: btnClassNames }}>
  <App />
</ConfigProvider>

4. 打包产物启用 React Compiler

变化:

• 在 antd.js 和 antd.min.js 中启用了 React Compiler
• CJS/ESM 场景用户可自行选择是否开启

技术解读:React Compiler 是 React 19 引入的编译器,能够自动优化组件的 re-render。Ant Design 在打包产物中预编译,意味着即使你的项目还在用 React 18,也能享受到部分性能优化。

注意:这是预编译到库中的优化,不是让你在项目中开启 React Compiler。如果你想在自己的项目中开启,需要单独配置。

5. 彻底清理 v4 废弃 API

变化:

• 移除所有在 v4 中废弃、在 v5 中保留兼容的 API
• 删除 findDOMNode 相关兼容逻辑
• 统一 API 命名风格,但兼容所有 v5 API

实际影响:如果你是从 v5 升级,这部分几乎不需要关心。但如果项目中还在用 v4 的老 API,升级前需要先处理 deprecation warnings。

新增组件和功能增强

1. Masonry 瀑布流组件

适用于图片画廊、卡片流等场景,终于不用自己手写或引入第三方库了。

2. Tooltip 支持平移和滑动

可以在多个 tooltip 内容之间平移和滑动,改善了密集信息展示的用户体验。

3. InputNumber 的 spinner 模式

提供了常见的按钮布局样式,让数字输入更加直观。

4. Drawer 支持调整大小

用户可以拖拽调整 Drawer 的宽度,适合需要灵活空间的场景。

5. 遮罩层模糊背景

所有浮层默认使用模糊效果,可通过 mask: { blur: false } 关闭。这个细节能显著提升视觉体验。

升级成本评估

低风险场景

• 从 v5 升级: 几乎零成本,直接升级即可
• 项目已在 React 18+: 无需额外处理
• 没有大量自定义主题: CSS 变量模式自动生效

需要注意的场景

• React 17 及以下: 必须先升级 React
• 需要支持 IE: 6.0 完全不支持 IE,必须停留在 v5
• 使用了 v4 废弃 API: 需要根据 warning 逐步替换
• CSS 变量冲突: 如果项目中已有同名 CSS 变量,可能需要调整

v5 维护周期

• v5 主分支已切换至 v5.x-stable
• 进入 1 年维护期
• 除非特别严重的 bug,不再有功能性更新

这次升级值得跟进吗?

优势明显的场景

1. 多主题应用: CSS 变量带来的性能提升和体积优化非常可观
2. 高定制化需求: 语义化结构让你能更优雅地控制组件细节
3. SSR/SSG 应用: 零运行时模式能显著改善首屏性能
4. 长期维护项目: React 19 支持更好,技术栈更现代

可以暂缓的场景

1. 项目稳定,没有性能瓶颈: v5 还会维护一年,不急于升级
2. 还需要支持 IE: 只能停留在 v5
3. React 版本无法升级: 比如大型遗留项目,升级成本太高
4. 团队精力有限: v5 到 v6 虽然平滑,但测试回归仍需时间

技术决策背后的思考

Ant Design 6.0 的升级策略其实很聪明:

1. 做减法而不是加法: 没有引入新的技术栈,而是优化现有架构,降低了学习成本
2. 平滑迁移路径: 不像 4 到 5 的大重构,这次可以无痛升级
3. 面向未来: React 19、CSS 变量、语义化结构,都是行业趋势
4. 性能优先: 从 CSS-in-JS 到 CSS 变量,从运行时到零运行时,每一步都在减少开销

但也有一些权衡:

• CSS 变量的调试成本: 相比直接的 CSS,变量嵌套后调试会更复杂
• 文档完整性: 语义化结构的文档还在完善中,某些组件的 classNames 结构不够清晰
• 生态兼容性: 一些第三方库可能还没跟上 6.0

实用建议

对于新项目

直接上 6.0,没什么好犹豫的。React 19 + Ant Design 6.0 + CSS 变量,是目前性能最优的组合。

对于 v5 项目

根据项目情况评估:

• 有性能诉求: 建议升级,尤其是多主题场景
• 有定制化需求: 语义化结构能省不少力
• 稳定运行中: 可以观望一段时间,等社区反馈

对于老项目

如果还在 React 17,先评估升级 React 的成本。如果 React 升级成本太高,v5 还会维护一年,不必强求。

结语

Ant Design 6.0 是一次务实的技术升级。 它没有追求表面的「大更新」,而是扎实地解决了性能、可定制性和未来兼容性的问题。

对于前端开发者来说,这次升级最大的价值在于:

1. 更好的性能,尤其是多主题场景
2. 更灵活的定制能力,不再需要「硬怼」样式
3. 更清晰的技术方向,React 19 + CSS 变量是未来趋势

是否升级,取决于你的项目状态和团队情况。但如果你问我:「6.0 是个好版本吗?」我的答案是:「是的,它解决了真问题。」

相关参考:

• Ant Design 6.0 发布公告[https://github.com/ant-design/ant-design/issues/55804]
• 升级指南[https://ant.design/docs/react/migration-v6]

PS: Ant Design X 也同步发布了 2.0 版本,专注 AI 场景的组件库。如果你在做 AI 相关的产品,值得关注。