注：文章转自 蚂蚁金服科技css
Ant Design 4.0 发布了，此次带来了哪些重磅的更新？前端
本次发布了一些重大更新。好比咱们添加了暗黑主题，无边框组件，RTL 国际化支持，Table 、Form、Select 等等的组件重作从而大幅提高性能。因为内容很是多 ，避免直接变成发布文档。欢迎移步至语雀查看完整更新：《Ant Design 正式版来了！》react
通过多年发展，Ant Design 已经成为一个生态，请介绍下这个生态包括哪些重要成员，生态从此的演进方向是什么？算法
Ant Design（如下简称 antd） 做为一个设计体系，包含的不只仅是一个组件库。除了耳熟能详的 Ant Design React 外，还有 Angular 版本的 NG-ZORRO、Ant Desin Mobile、Ant Design Landing、HiTu React，以及来自社区志愿者的 Ant Design Vue。垂直方向开箱即用的中台前端 / 设计解决方案 Ant Design Pro 和对应的区块市场，以及衍生组件库 Pro Layout 和 Pro Table。设计上也提供了很是多的规范文档以及相关的设计资产。typescript
Ant Design 像是一颗树，在其之上开枝散叶很是的有想象空间。将来首先仍是会继续基于设计体系进行深耕，其次会跟随相关框架一同进步。同时 Ant Design 还会立足于真实的业务需求，来丰富生态产品。windows
在从 3.0 到 4.0 的过程当中，antd 团队攻克的最大难题是什么？最自豪的新特性是什么？antd
v4 版本和社区同窗一块儿重构了大量的底层组件，从而大幅提高了组件渲染性能。举个例子，v3 版本中 Form 组件的字段更新会使得整个 Form 从新渲染，这在大型表单中会有严重的性能问题。在 v4 中，Form 只会更新相关的字段组件，从而大大下降了渲染时长。在 Tree、Select、TreeSelect 等组件内置虚拟滚动，从而大幅减小了实际渲染的元素。框架
说到比较难的，就是此次重构因为支持虚拟滚动，因此须要处理基于虚拟滚动的动画收缩伸展方案。举个例子，Tree 组件在 v3 版本中，缩放能够经过原生的 transition 与 height 来实现收缩伸展效果。可是在虚拟滚动中，每一个元素实际上是独立的元素，因此缩放时若是要达到和 v3 一致的动画效果，就须要将与之相关的算法自行实现。于是咱们将其划分为多个阶段，在不一样的阶段处理不一样的逻辑，从而组合出支持虚拟滚动的动画实现。具体实现逻辑比较复杂，若是感兴趣能够查看 rc-virtual-list 的相关代码。布局
antd 在设计上是如何权衡效率、性能 / 体验和质量三者的？性能
我的角度看，后三者者其实并不矛盾。Ant Design 的组件开发通常有如下几个步骤：
中间每一个环节都会认真负责地完成，其中 Code Review 部分也是最漫长的阶段。Code Review 环节会对 API 以及代码实现反复修正，设计与开发者共同参与，从而达到 1 + 1 > 2 的效果。组件的开发并不能一味地追求效率，从设计到实现都须要慢慢打磨。举个例子，Typography 这个组件做为排版组件，看起来很是简单，可是从设计到开发完成前先后后花了一个月的时间，API 通过了反复调整力求以最精简的方式简化开发者的记忆成本，同时也兼顾了拓展性。设计层面也是反复斟酌以达到中英文语境下都有很好的视觉效果。
在 v3 版本中，组件的性能问题主要出在对旧版 IE 的兼容性需求上，于是很多实现只能使用比较黑的方式，下面的问题会提到因此不重复提了。因为 v4 版本 IE 最低兼容版本改为了 IE 11，这些再也不是限制，从而使得咱们有能力去逐渐更新，更好地提高性能。
在对 IE 的兼容性方面作了一些取舍，缘由是什么？兼容 IE 的难点都有哪些？
v3 版本为了兼容旧版 IE，不得不作一些妥协。好比说 flex 布局不能用，咱们就用 float 和 table 来搞；不能用 sticky，Table 为了实现固定列不得不额外再渲染一个 Table 达到固定列的效果。最近几年，随着 windows 系统的升级，旧版 IE 的占比已经愈来愈小。这也是一个契机，让咱们在 v4 版本能够舍弃过于陈旧的 IE 版本，从而轻装上阵。
兼容 IE 的难点在于不少行为是非预期的，每每代码没有什么问题，可是页面渲染就是不正常。对于这种状况，就须要作很多的黑科技。好比说让组件强制刷新、使用 IE only 的 css hack 等等。此外前面提到的不少 HTML 新特性在 IE 环境下没法使用，只能自行模拟致使严重的性能损耗。
你认为 antd 目前对 TypeScript 的支持到位了吗？若是还有欠缺，主要在哪些地方，将怎么解决？
在 v3 版本中，咱们大量底层组件是经过 js 编写，于是 ts 的类型定义是在 antd 上额外作的，这样的缺点就是和底层的组件并不彻底匹配。在 v4 版本中，咱们将大量底层组件也转成了 ts 版本，在 antd 端直接使用这些定义，从而避免了过去定义不匹配的状况。固然，这个过程也不是一蹴而就的，还有一分部底层组件尚未完成转，欢迎社区的同窗一同帮助让 ts 定义作得更好。
除此以外，咱们也遇到一些有趣而恼人的问题——那就是因为 typescript 和 @types/react 本体的升级，致使本来的 ts 定义失效。过去有过一段时间，antd 的 Button 每周都在更新 ts 定义来适配最新的 @types/react。这种状况在所不免，保持更新便可。
在发布公告里专门提到了 @saeedrahimi @shaodahong 两位社区同窗的贡献，可否具体介绍下这里面的故事？
@saeedrahimi 同窗他为 v4 贡献了所有组件的 RTL 国际化能力，改了数千行代码。这个功能很是大，过一次 PR 能够看到眼花。就这样咱们一遍遍地 Review & Update，最终将其实现，中间很是不容易。
@shaodahong 其实在 v3 时就已是热心志愿者了，在 v4 的发布中，也帮助作了不少的工做，其中兼容包的开发主要是由他完成的。经过兼容包，开发者能够以尽量小的成原本将 antd 从 v3 升级到 v4。
固然，除了这两位同窗外，还有很是多的志愿者参与了 v4 的开发工做。借这个机会，再次向各位志愿者表示感谢！
有部分用户反馈社区反哺困难，源码使用 rc-* 封装实现，致使开发者想帮忙修复 bug 却望而却步，这方面有考虑如何解决吗？antd 团队是怎样看待与社区开发者之间的联系和交互的？
rc 组件的设计思想是简单且灵活，于是它不会对样式有强依赖。而 antd 除了组件功能外，还有着本身的设计体系，因此在 UI Design 上也会更重一些。这种划分，使得若是用户只想用组件的功能却不须要它的样式就能够直接基于 rc 组件进行封装。举个例子，Form 的底层组件 rc-field-form 自己彻底不带样式，而在 antd 出则是封装出带样式的 Form 和 Form.Item 且不暴露底层的 Field 组件。其实在 v4 发布前，已经有很多的社区同窗基于 rc-field-form 封装出本身的组件了。二者从设计思想上是不一样的，于是在将来也不会合并。
从发 PR 角度看，其实没必要有太多的心理负担。组件各司其职，不会由于底层多一个 rc 组件库就望而却步。其实从平时的维护看，志愿者给 antd 和 rc 发 PR 的热情是同样的，不存在有 bug 由于在 rc 组件里就修不了的状况。甚至有时候反过来，有的用户只用了 rc 组件，于是给 rc 组件发了不少的 PR 来帮助改进，这也使得这些 PR 一样反哺给了 antd。
后续的版本规划是怎样的？将来还将有哪些值得期待的新特性？
v4 版本在发布后，因为大量组件的重构，主要精力暂时会聚焦于 bug fix 上。待其稳定后，咱们会为 React 将来的 Concurrent 模式作好准备。此外，也有计划为了 css in js 作一下调研，以支持动态切换主题的能力。固然，就像刚刚说的，目前的首要任务仍是聚焦在 bug fix 上。
做为被普遍使用的前端明星开源项目，你认为 antd 发展至今取得成功的缘由是什么？开源这几年最大的收获和教训是什么？
Ant Design 受欢迎离不开社区同窗的支持，是你们的承认才使得 Ant Design 可以走到今天。一个开源项目的成活，除了维护者的保持更新外，也须要来自社区的力量。开源界中，你会看到很是多的优秀项目。可是随着时间推移，逐渐再也不维护。于是如何保持项目的活力是重中之重。
Ant Design 从 2015 年写下第一行代码至今走过了很多年头。最大的收获就是来自社区同窗的帮助，来一块儿把 Ant Design 打形成一流的前端组件库。而同时做为开源项目，也必须按照开源的方式来公开透明的维护项目。从而不辜负社区同窗的信任。