• Ant Design GitHub 仓库地址：https://github.com/ant-design/ant-design/
• Ant Design 官网：https://ant.design/index-cn

  引言

在 9 月底，我们发布了 v5 alpha 版本。经过 2 个月的调整，API 已经逐渐稳定。感谢社区同学所提供的宝贵建议与代码贡献，正是社区的力量使得 Ant Design 在短时间内完成了大量的改造工作。这里我们会对 v5 的一些重大更新进行说明，当然你也可以直接到 更新日志 （https://ant.design/changelog/ ）页面查看完整的更新内容。

需要注意的是，同上一个大版本发布一样。我们将会将 v4 从主分支切换至 4.x-stable 分支进入维护状态。v4 将会继续维护 1 年时间，仍然会对 Bug 发布 Patch，但是此后不再接收新的 Feature Request。截止日期为 2023 年年底。原 v4 官网迁移至 https://4x.ant.design/。

  设计升级

设计方面，我们根据自身业务实践和社区呼声，增加了 4 类新组件和 4+ 变体组件， 这些组件都经过严谨的推敲，确保了其通用性和扩展性，希望它们为你带来良好的使用体验。同时，我们将内部使用很久的一些重型资产开放出来，帮助大家服务更多的业务场景。

另外在默认样式方面，我们对组件进行全面升级。秉持快乐工作的内核，我们从「更聚焦」、「去干扰」、「轻松感」三个方向对系统视觉进行了升级。其中涉及到主色、圆角、文字色阶、交互反馈等多个全局样式的优化和调整，另外我们还对导航框架和几乎所有组件做了去线化处理。这些改变，除了能带给你焕然一新的感觉，在具体使用过程中，也更加易用。当然，如果你对样式主题有不一样的审美和诉求，在 5.0 当中，你可以轻易根据我们提供的样式算法和配置工具，一键定制属于你自己的主题。

最后，我们始终以人为本，正在试验名叫「快乐工作」的主题包，内含情感增强特色组件，用户在特定场景使用时，会有丰富但克制的动画，为用户带来一点“快乐感”。我们希望这是一个开始，呼吁行业设计多关注企业级产品，为冰冷的企业级产品注入更多的情感去关怀我们的用户。快乐工作主题包将在发布会后推出，敬请期待～

  全新 Design Token 模型

在 v4 版本中，我们提出更多的 less 变量以支持主题定制能力。然而除了色板支持完全的派生能力外，其他如字体、行高、间距都没有对应的算法。在 v5 中，我们改造了所有的 Token，使其基于 Seed + Algorithm 可以派生出所有的 Design Token。全新的 Design Token 模型支持多算法 Pipeline，从而大大降低开发者拓展成本。你可以选择一个现成的算法，再加自己的拓展部分算法（当然你也可以写一套完整的算法），就可以生成一套完整的 Design Token：

  CSS-in-JS 动态主题

过去我们尝试通过 CSS Variables 提供动态主题能力。在经过一段时间的探索后，我们发现随着设计系统的复杂度提升，其中间变量的维护成本就会变得不可忽略。因而在 v4 时期，CSS Variables 停留在了动态主题色而没有进一步提供暗色、其他 Token 的动态能力。到了 v5，随着灵活性的需求呼之欲出，我们不得不再次面对动态主题的问题。

在 v5 启动伊始，我们花了几个月的时间对比当下流行的动态主题方案：CSS Variables 与 CSS-in-JS。CSS-in-JS 不需要维护中间变量，但是有更多的运行时消耗（如果你对此不太熟悉，欢迎阅读 Why We're Breaking Up with CSS-in-JS）https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b 。从维护成本而言，我们更倾向于后者，但是我们并不希望因此而损害用户体验。因而在经过一系列尝试后，我们研发了一套针对组件级别的 CSS-in-JS 库 @ant-design/cssinjs。它通过牺牲动态性来获取更高的缓存效率，从而减少运行时的性能损耗。通过动态主题能力，你通过 ConfigProvider 可以任意调整、嵌套主题：

<ConfigProvider theme={{ token: { colorPrimary: 'red' }}}>
  <ConfigProvider theme={{ token: { colorPrimary: 'blue' }}}>
    <MyApp />
  </ConfigProvider>
</ConfigProvider>

甚至可以针对某一个组件进行调整：

<ConfigProvider theme={{
  components: {
    Button: { colorText: 'red' },
  },
}}>
  <MyApp />
</ConfigProvider>

代码示例太乏味？你可以直接在我们的首页体验示例：

新的 CSS-in-JS 方案原生支持 Tree Shaking，在 v5 你不在需要使用 babel-plugin-import 摘除未使用到的样式。新的方案将自动按需加载样式。

  更多组件

新增 FloatButton 组件用于网站上的全局功能，原 BackTop 将收为其子组件：

新增 Tour 组件用于引导用户了解产品功能：

此外，我们还提供了一些组件的变体用于内联使用：

  兼容性调整

浏览器最低版本调整

今年 6 月 IE 宣布停止维护，因此 Ant Design v5 兼容性调整从 IE 11 提升至 Edge，其余现代浏览器不变。IE 兼容性样式代码将全部移除。至此，我们可以通过 CSS Logical Properties （https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties）将 RTL 与 LTR 样式合并，进一步减少维护成本。

默认 Day.js 代替 Moment.js

Moment.js 在 2020 年转为 Legacy Project。（https://momentjs.com/docs/#/-project-status/）考虑到切换日期库会导致 Break Change，我们在 v4 时期选择继续使用 Moment.js 直至 v4 结束。到了 v5，我们切换为更轻量级的 Day.js。（https://day.js.org/）Day.js 除了包体积更小之外，也带来了 immutable 能力。当然，如果你希望项目升级后仍然使用 Moment.js，可以通过 @ant-design/moment-webpack-plugin 插件进行替换。

API 非 Break 调整

Ant Design 在 7 年的研发过程中，部分 API 出现分叉的情况。这导致开发者有额外的记忆成本，同时也使得我们新增 API 时也难以选择。原本我们计划对一系列 API 进行整理合并，同 v3 升级 v4 一样在当前版本提示开发者迁移 API，并在 v5 移除废弃 API。但是在经过社区交流之后（https://github.com/ant-design/ant-design/issues/36609），我们决定改变计划为：每个大版本只会调整少量 API，并且原废弃 API 在新版本中会继续兼容，推迟到下下个大版本移除。这次我们改动以下部分，并且 v5 会全部兼容原来写法：

• 弹层类组件 open 与 visible 统一至 open 以符合 HTML Spec（https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open）。
• dropdownClassName 与 popupClassName 统一至 popupClassName 以更符合语义。
• 结构语法糖（例如 <Select.Option />）使用数据驱动代替，以为性能优化做准备。
• 废弃静态方法（例如 Message.error），推荐应用层封装以支持 React 18 concurrent 模式。

组件移除

v5 将会移除 Comment 组件 与 PageHeader 组件，BackTop 将会成为 FloatButton 子组件。由于 Comment 组件本身除样式外并未提供实际能力，开发者仍然需要额外工作来实现评论功能。此外由于实际使用场景不多，我们决定从 v5 中移除，但是你仍然可以在兼容包中找到它。PageHeader 组件同样需要一定的开发工作来使其工作，因而我们将其挪至 ProComponents 中，与 ProLayout 一同使用从而提供真正的交互能力。

  如何升级

如 兼容性调整 所述，由于 v5 不会对 API 做 Break Change，因而你可以尝试通过我们的 codemod 工具进行迁移。对于 Moment.js 可以使用我们提供的 @ant-design/moment-webpack-plugin 插件进行替换。如果你的项目依赖了 antd 的 less 文件，请参考我们的迁移文档通过 less-loader 进行兼容。详细文档请点击此处查阅 👉🏾 https://next.ant.design/docs/react/migration-v5/。

  未来规划

未来我们计划提供更多的组件，有些已经排上议程，例如 WaterMark、QrCode、ColorPicker。而针对 Table 性能的热烈呼声我们已经听到，计划为展示态提供虚拟滚动能力，其将会原生支持固定列能力。此外，由于在 v4 中，我们已经收敛结构语法糖至数据驱动属性中，我们有了更好的机会对性能做优化，包括不仅限于 Menu、Table、Steps、Collapse、Tabs、Dropdown 等等。

设计侧，我们将会更新官方站点提供更多组件级别的设计指引，这将会由设计团队持续更新。过去我们在中文社区写了不少文章，我们希望也趁此机会将文章提供英文版本，让国际开发者、设计师可以共同阅读。让我们拭目以待。

  写在最后

Ant Design 经历 7 年时间，成为了生态丰富的社区。期间离不开社区同学的帮助，从 Ant Design v4 有大量社区志愿者参与到 v5 大部分功能都由社区同学完成。是你们让 Ant Design v5 可以如此快速的完成研发工作，是你们让开源变得美好。感谢大家！

• iamkun：https://github.com/iamkun
• zombiej：https://github.com/zombiej
• afc163：https://github.com/afc163
• madccc：https://github.com/madccc
• PeachScript：https://github.com/PeachScript
• vagusX：https://github.com/vagusX
• LongHaoo：https://github.com/LongHaoo
• xrkffgg：https://github.com/xrkffgg
• chenshuai2144：https://github.com/chenshuai2144
• lushevol：https://github.com/lushevol
• Wxh16144：https://github.com/Wxh16144
• kunl：https://github.com/kunl
• cncolder：https://github.com/cncolder
• c0dedance：https://github.com/c0dedance
• jrr997：https://github.com/jrr997
• Dunqing：https://github.com/Dunqing
• JarvisArt：https://github.com/JarvisArt
• zqran：https://github.com/zqran
• TrickyPi：https://github.com/TrickyPi
• li-jia-nan：https://github.com/li-jia-nan
• heiyu4585：https://github.com/heiyu4585
• foryuki：https://github.com/foryuki
• chunsch：https://github.com/chunsch
• yykoypj：https://github.com/yykoypj
• cl1107：https://github.com/cl1107
• poyiding：https://github.com/poyiding
• dancerphil：https://github.com/dancerphil
• miracles1919：https://github.com/miracles1919
• zpc7：https://github.com/zpc7
• shuaijiumei：https://github.com/shuaijiumei
• lzm0x219：https://github.com/lzm0x219
• LuZhenJie1999：https://github.com/LuZhenJie1999
• BesideWithYou：https://github.com/BesideWithYou
• shezhangzhang：https://github.com/shezhangzhang