很难想象没有组件库的React Web应用程序。 您可以根据需要自己逐步补充此类库，也可以使用根据npm模块广阔的海洋中的恒星数量精心选择的现成解决方案的大杂烩。
如果幸运的话，在项目开始时，您将已经具有可使用的带有React组件的设计系统，该系统已与设计者达成协议并在战斗项目上进行了测试。 但是，如果没有设计，没有设计师，更不用说项目上的设计系统了，该怎么办？ 如果应用程序的MVP版本应该在昨天准备好，并且没有时间将您编写的日期选择器与github中的选择框进行样式链接，该怎么办？ 通常，在这种情况下，他们在开始项目之前会选择使用现成的组件库，以最大程度地减少编写自己的自行车所花费的时间。
鉴于React的流行，它的组件方法以及近年来围绕设计系统的疯狂宣传，此类库的选择应该是惊人的。 因此，我们认为几年前我们开始寻找这样的系统。 实际上，一切都不是那么晴朗。 符合我们需求的组件库可以用手指指望。 我们选择了Ant Design，从那以后就再也没有后悔过，使用此库实现了大约六个项目。
蚂蚁设计
严格来说，Ant Design是一种完整的设计系统，一种视觉语言。 通过其原理，样式指南和组件库，将在本文中进行讨论。 该项目得到阿里巴巴集团开发人员的支持。 这些人还支持dva-基于流行的React，Redux，React-Router堆栈的框架，该框架在阿里巴巴项目中得到积极使用。 这说明了这两个项目的紧密集成以及github上文档和发行中中文的丰富性。 Ant Design本身是用TypeScript编写的，使用Less进行样式设置，并移植到Angular和Vue，但是端口完全由不同的人支持。
我们不会将Ant Design的原理描述为系统设计或使用dva的功能-所有这些都是单独文章的主题。 我们专注于Ant Design可以作为React的组件库精确提供的功能。
为什么蚂蚁设计好
我们不会列出所有组件：列表令人印象深刻。 最好在
官方网站上熟悉它。 该文档非常详细，并包含许多示例。 大多数组件都可以通过使用
react-component模块与Ant Design分开使用，这些
组件模块突然得到了阿里巴巴同一个人的支持。
我们认为，Ant Design具有两个与同类库不同的功能：表格和表单。 实际上，这两个功能都不是简单的组件。 我们将告诉您更多有关它们的信息。
桌子
综合分页默认值为客户端。 但是您可以自己编写，没有问题。 也就是说，实现服务器分页并不困难。
筛选和排序开箱即用的是通过带有选项的下拉选择器进行过滤的功能。 自己描述排序和过滤功能。 默认情况下，表无法按输入的字符串过滤记录。 但是您可以编写自己的自定义过滤器，文档中对此进行了详细描述。 诚然，这个过程相当痛苦，但是有很多机会。
行选择如果需要确保选择特定的表行以供用户采取进一步的操作，Ant Design表为此提供了一个相当灵活的API。
套料有时有必要使某些表行可扩展以隐藏其他信息。 Ant Design Tables开箱即用。
细胞联合标题和行中单元格的并集是不同的，但是在两种情况下，您都需要事先知道需要组合哪些单元格，并明确指出它们。 这极大地增加了动态数据的处理复杂度，但是原则上并没有使其成为不可能。 我们也有类似的经历，需要创建其他抽象来描述联合的属性，并告诉表格哪些单元已经组合而哪些没有。
可编辑单元格表的API通常非常灵活，可让您根据需要呈现单元格。 因此，单元格编辑只是巧妙使用所提供功能的一种特殊情况，在文档中对此进行了详细说明。
列和标题的固定也许是渲染大量数据的最流行功能。 您可以同时修复左右两列，表标题，甚至一起修复。 它的工作原理不是没有周期性发生的错误，而是可以忍受的。
好的，缺点是什么？我要报告的第一件事是，Ant Design表默认情况下不支持虚拟化（但是文档详细描述了如何使用react-virtualized将虚拟化固定到List）。 5行的默认页面大小不只是这样。 由于存在大量的阻塞功能，表中的render方法每次打喷嚏都适用（例如，将鼠标悬停在一行上-这对于固定的列才能正常工作是必需的）。
由于上述所有原因，Ant Design表不适合绘制大量行-一百多行已经能够显着降低应用程序性能。
第二个是默认的表格样式。 显然，中文不认为使用word-break：break-word;是可耻的，并且在表中有意识地使用了此属性，但是结果，即使是官方文档中的示例也没有限制表的最大宽度，看起来像这样：
这个问题很容易解决，但是当您第一次遇到这个问题时却不愉快。
继续讨论样式，可以注意到，表格单元格中的内容在中间具有垂直对齐方式，对于单元格中的大量内容来说，这看起来不是很好。 当然，所有这些都取决于品味，但是在每个使用Ant Design的新项目中，我们都添加了几个样式钩子，这些钩子会稍微改变表格的外观。 否则，Ant Design表是一个很棒的工具，在React生态系统中几乎没有同伴。 我们走得更远。
表格
就其本身而言，Form容器组件几乎没有什么作用：隐藏必填字段的星号，更改标签和字段的相对位置并调用onSubmit处理程序。 更为重要的是HOC Form.create，它添加了大量有用的方法并控制包装在内置装饰器中的表单元素。
在创建的表单中，您可以添加带有简单对象的验证规则，将字段值与Redux Store同步，分别存储默认字段值，然后通过调用一种方法来应用它们……存在很多可能性。 初学者通常会开始分别使用Ant Design表单的组件，因此，在开始安装Ant Design的项目中使用表单之前，我们建议您仔细阅读Form上的文档部分-拥有此工具可避免编写大量自行车。
表单组件Ant Design提供了许多有用的自定义组件来进行布局。 基本上，这些已经是具有某些独特功能的标准字段，开关和选择器。
- Input和InputNumber是两个不同的组件
- DatePicker只能选择一天或一段时间。 我们没有找到一种方法来增强选择两个或多个独立日期的能力。
- RangePicker通常不适用于移动设备。 您必须使用两个DatePickers。
- TimePicker是由三个组合的选项（小时，分钟，秒）组成的，每个人似乎都不熟悉。
- 在我们看来，Upload组件API不太灵活。
定制和本地化
作为自定义Ant Design主题的推荐方法，建议您使用
less-loader重写Less变量。 该方法看起来非常关键，并且涉及以js对象的形式存储主题配置。 但是，好处是可以在程序集的所有较小文件中使用配置中指定的变量，而无需其他导入。
连接和重写样式的经典方法也可以使用，但不建议使用，因为它可以绘制所有组件的样式，无论您使用全部还是仅使用其中的几个。
另外，应该说创建黑暗主题比我们想象的要困难。 这不仅需要重写大量变量（并且有
很多变量），而且还需要在Ant Design之上编写一定数量的样式。 对于轻主题，通常不会出现此类问题。
为了进行国际化，Ant Design提供了
LocaleProvider包装器和可供选择的语言环境列表。 ru_RU在列表中。
合计
当然，Ant Design库并非没有缺陷。 例如，这包括对移动设备的适应性差（甚至还有单独的
Ant Design Mobile ，但这是完全不同的故事）。 但是，在替代方案的背景下，该项目以其规模，一致性和大量现成的解决方案（甚至还有管理面板的官方样板
-Ant Design Pro ）而脱颖而出。 我们建议使用Ant Design快速启动对Web设计，MVP版本和要求不高的项目的要求不高的项目。