不破不立 —— 挥别 less-loader，Ant Design 5.0 Alpha 发布

2023-05-19 377

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 不破不立 —— 挥别 less-loader，Ant Design 5.0 Alpha 发布

🙋🏻‍♀️ 编者按：本文作者是 Ant Design Team，介绍了 Ant Design 5.0 Alpha 的新特性、重要更新以及接下来的计划，欢迎查阅～

关注我们的同学可以知道在今年（2022）年初的时候我们发布了一篇《Plan about Ant Design V5》[1]，来介绍我们将要启动的 5.0 计划。社区在经历 8 个月的研发、发布 30 个 experimental 版本验证后，新的技术架构已经稳定，终于发布了 v5 alpha 版本！欢迎大家尝试，并提供宝贵的意见。

在正式版发布之前，我们还有更多事情要做。但是如果你已经迫不及待尝鲜，可以访问我们的 5.0 官网 [2]（迁移参考此处 [3] ）。

新特性

新的设计

5.0 带来了全新的设计理念，围绕用户目标，根据「更聚焦」、「去干扰」、「轻松感」三大原则，对 Ant Design 设计系统在视觉上进行重塑，助力用户在虚拟办公空间更加「快乐工作」。

新设计

针对这些原则，我们在以下方面作出了优化，包括但不限于：

增加梯度圆角并增加了基础圆角的大小，整体风格更轻松；
减少线条使用，以获得更高的空间使用率和更简洁的使用体验；
提高了交互动画速度，交互体验更加流畅；
补充了统一的聚焦样式，仅在使用键盘聚焦时出现，无障碍能力（Accessibility）进一步提升。

新的动态主题方案

在 4.x 版本中，受制于 less 的样式与主题方案，我们一直摆脱不了两个问题的困扰：如何动态更换主题以及如何混合使用主题。经过一段时间的探索，在 5.0 版本中，我们放弃了跟随 antd 已久的 less 方案，转而拥抱 CSS-in-JS。CSS-in-JS 通过运行时的样式计算能力完美地解决了上述两个问题，并且为我们带来了更多的提升：

更小的 BundleSize；
不依赖任何插件的样式按需引入能力。

有了 CSS-in-JS 的技术加持，我们推出了全新的定制主题方案。在 5.0 版本中，Design Token 将是主题的基本组成部分，所有组件都会消费他们构筑样式。同时，我们依赖 Design Token 建立了样式的缓存，即认为在同样的 antd 版本下同样的 Design Token 所对应的组件样式是等同的，因此避免了重复生成样式进行对比的操作，避免了性能损耗。

基于 Design Token 和 CSS-in-JS ，我们制定了更加灵活的定制主题方案。通过 5.0 的定制主题，你可以做到的包括但不限于：

全局主题定制；
局部主题（嵌套主题/多主题并行）；
组件主题定制；
在 Sketch 中直接使用配置过主题的设计稿。

想要了解更多请查看定制主题 [4] 文档。

新增组件

5.0 版本中计划将会有一些新的组件供用户选择！他们分别是：

Tour 漫游式引导
QrCode 二维码
WaterMark 水印
FloatButton 悬浮按钮

目前已有 FloatButton 悬浮按钮 [5] 准备就绪，欢迎试用。

其他重要更新

更多变化请查看迁移文档[6]

浏览器兼容性调整

在今年 6 月，IE 浏览器正式停止了服务，也因此 Ant Design 5.0 版本将不再支持 IE 浏览器。放弃兼容一些低版本的浏览器之后我们可以使用更多 w3c 通过的新特性来丰富我们的组件库。

弹窗组件 API 统一

在 4.x 及更早的版本中，具有弹窗的组件受控显示的 API 一直分裂为两派，以 Select 为首的 open，以及以 Tooltip 为首的 visible。为了减少今后编码及使用中的不一致性，并降低记忆成本，我们在 5.0 版本中决定在相关组件中将 visible这个属性废弃。我们经过多方面的考虑选择了open 这个属性，比如原生 HTML 中 dialog 标签就具有 open 这个属性而不是 visible。您仍可以在 5.0 使用 visible，但是我们将在控制台中发出废弃警告，并在下一个 major (6.0) 版本中移除这个属性。

同样地，弹窗的 className 也一直分裂为 popupClassName 和 dropdownClassName 两个属性，我们也将在 5.0 中统一为 popupClassName。

废弃结构语法糖

在 4.x 版本及更早的版本，我们提供了诸如 Menu.Item 等的 JSX 语法糖来编写代码，但这带来了额外的维护成本和糟糕的性能。因此，在 5.0 版本后，我们更加推荐数据驱动的组件使用方法，即通过 items 属性传入对象来替代结构语法糖，这将会有更好的性能和更方便的数据组织方式，并提前为将来的优化做好准备。

废弃静态方法

在 Message 等组件中，我们提供了诸如 message.error 等静态方法来使用该组件。但在 React 18 版本之后，不处于 React 生命周期内的静态方法会出现各种各样不适配的问题。在 5.0 版本中，我们更加推荐使用这些组件的 hooks 版本，这更符合 React 的生命周期。同时也推荐在应用层面封装自己的 hooks 来获得更好地使用体验。

接下来的计划

在发布正式版之前，我们仍有大量的工作正在进行中，其中包括：

提供从 V4 迁移至 V5 的 codemod 工具；
提供更加完备的主题编辑器；
翻新我们的官网，提供更多实用功能，比如组件支持复制粘贴到 Sketch；
更多的新组件。

请继续期待 Ant Design 5.0 带来的全新体验！

写在最后

Ant Design 5.0 历经 8 个月的开发时间，期间不少社区同学参与并贡献了代码，在此我们表示衷心的感谢，也感谢大家对于 Ant Design 的热情与认可。最后再次欢迎大家尝鲜我们的 5.0 alpha 版本，如果您遇到问题，也欢迎在我们的 issue 板块中提出。同时也欢迎更多的社区同学共建 Ant Design，Ant Design loves you ❤️ ！

[2] https://next.ant.design/index-cn

[3] https://next.ant.design/docs/react/migration-v5-cn

[4] https://next.ant.design/docs/react/customize-theme-v5-cn

[5] https://next.ant.design/components/float-button-cn/

[6] https://next.ant.design/docs/react/migration-v5-cn

不破不立 —— 挥别 less-loader，Ant Design 5.0 Alpha 发布

新特性