Ant Design 4.0 进行时！

引言

Ant Design 于 17 年 12 月发布 3.0 以来，已经经历了 16 个月的时间。在此期间，咱们修复了海量 Bug、以及增长大量新功能（更新日志）。提交了 4289 个 commits，发布了 138 个版本，关闭了 7675 个 issues 和 PRs，新增了 25375 个 stars。咱们也发布了 Ant Design Pro 4.0。支持了 TypeScript、区块以及对布局进行抽象。咱们想感谢各位社区志愿者，是大家的奉献使 Ant Design 变得更加好用。

与此同时，咱们也在思考下一步是什么，如何才能使 Ant Design 走的更远，咱们预计在今年 Q4 发布 Ant Design 4.0 版本。🍻

如下是关于 4.0 的详细计划，固然这仍在计划中。正式发布时可能会有调整。

🌓 兼容性调整

咱们将在 4.0 中，对标记为 Deprecated 的属性进行移除。届时你将不能再使用废弃的方法。若是你将你的项目升级到最新的 3.x 于控制台中没有看到来自 antd 的 warning 信息，那么你升级 4.0 也将是无缝的。对于 3.x 版本，咱们仍将在 4.0 发布后额外进行半年的维护工做。

咱们知道升级版本舍弃废弃 API 的精力很是大，咱们计划在发布 4.0 的同时也提供兼容包以协助项目过渡（相关 API 仍在设计中，正式发布时可能会有所不一样）：

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
	<Compatible> <YourApp /> </Compatible>
);
复制代码

该兼容包一样会维持更新直到 3.0 维护工做中止为止。

使用最新版本 React API

咱们至关长一段时间内都在支持 React 15 版本，可是从社区反馈上看，这其实并不重要（React 15 的 issue 数趋近于 0%）。由于 React 自己就具有很是健壮的兼容性。而为了支持 React 15，咱们在开发过程当中对于新的 API 使用很是慎重。在 4.0 版本后，咱们会以最新 React 版本做为基准进行开发：

• 提供相关组件的 Hooks 版本
• 支持 Concurrent 模式（固然，须要准备的事情比较多，会在 4.0 发布中持续调整。）
• 拥抱 React 17 （wow！~）

中止 IE9/10 支持

Ant Design 3.0 为了兼容旧版 IE 作出了很是多的努力。然而根据业界统计，IE9/10 浏览器不管是在全球仍是在国内份额都在随着 Windows 系统更新而在不断缩减。咱们在 4.0 版本，会中止对 IE 9/10 的支持工做（但仍然会支持 IE 11）。这也意味着，支持新的游览器特性成为可能。

其余兼容性调整

• Less 2.x 升级为 Less 3.x
• Icon 使用变动
• Mention 废弃

📦 减少体积

优化图标尺寸

在 antd@3.9.0 中，咱们引入了 svg 图标（为什么使用 svg 图标？）。使用了字符串命名设置图标的 API，在这种设计下咱们没法作到按需加载，于是咱们全量引入了 svg 图标文件，这大大增长了打包产物的尺寸。在 4.0 中，咱们将会对此进行调整以优化体积。

旧版 Icon 使用方式将被废弃：

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
  	<Icon type="smile" />
    <Button icon="smile" />
  </div>
);
复制代码

4.0 中会采用按需引入的方式：

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div> <SmileOutline /> <Button icon={<SmileOutline />} /> </div> ); 复制代码

你将仍然能够经过上文兼容方法继续使用。

移除 Draft.js

咱们在 Mention 组件中引入了 Draft.js 以实现下拉提示定位功能，然而咱们只使用了它很小一部分的功能。从性价比上考虑，显得有些浪费。咱们计划在 4.0 中移除对其的依赖，转而使用更轻量级的解决方案。同时，为了区分 3.0 中的 Mention 组件，咱们会提供一个新的组件 Mentions 以防止 API 冲突。一样的，它也支持经过上文兼容方法来继续使用：

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention /> ); 复制代码

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions /> ); 复制代码

🧭 性能优化

在维护过程当中，咱们收到很多关于大数据的下的性能讨论。为此，咱们也计划对性能进行优化。

虚拟滚动

虚拟滚动是一个常见的优化手段，可是在 Ant Design 中因为存在动画效果，使得自定义虚拟滚动并不那么容易。如今，咱们计划带滚动的组件中原生支持虚拟滚动。固然，咱们并不会保证在 4.0 发布时全部组件已经更新完成，会持续更新。

动画改进

过去，咱们使用了一些 hack 的方式来对动画进行处理。大部分场景下，都工做的至关好。在 4.0 中，咱们计划对此进行调整，摒弃 hack 的方式转向更加 React 的道路。该调整将会静默更新，你不须要对此作任何更改。

🧩 关于组件

在 3.0 中，咱们已经持续添加了很多组件。在 4.0 中，咱们仍将进行下去。这些组件将从咱们的业务场景、Ant Design Pro 以及社区需求中进行提炼，这是一个持续的过程。新增组件的流程与 Ant Design 3.0 相同，咱们会沉淀相关组件的设计稿在 PR 中展现并与官网进行更新，开发完成后会在每月的 minor 版本中发布。

此外，咱们还准备重构一些关键组件，以提升其开发与交互上的易用性。其中包含但不限于：

Form 组件

表单组件的受众群体十分庞大，咱们也注意到社区对繁琐的表单 API 的抱怨，在 4.0 里咱们但愿探索更好的 API 形式以简化开发成本：

• Form 将默认聚合表单数据域，你再也不须要经过 Form.create() 建立上下文。
• Fom.Item 将默认聚合表单字段，你不须要经过 getFieldDecorator 绑定 Field。
• Form.Item 的值将总会保留，可是其验证功能只有表单项可见时才会生效。

const Demo = () => {
  const [form] = Form.useForm();
  
  const onFinish = () => {
  	// Do something...
  };
  
  useEffect(() => {
  	// Something like ajax call
    form.setFieldsValue({
    	username: 'light',
    });
  }, []);

	return (
  	<Form form={form} onFinish={onFinish}> <Form.Item name="username" rules={[{ required: true }]}> <Input /> </Form.Item> </Form> ); } 复制代码

在现实场景中，咱们遇到了多表单联动的场景（常见于详细化配置）。咱们知道这使用起来并不方便，于是也将提供表单间联动的功能：

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
	return (
  	<FormContext> <YourForm1 /> <YourForm2 /> </FormContext>
  );
};
复制代码

若是你想关注 Form 进度，欢迎查看进度。

Table 组件

在过去的版本中，咱们接到了关于 Table 组件很是多的反馈。咱们知道过去 Table 的 expand 和 scroll 属性一直不能很好的工做。这一次，咱们会着力解决这方面的冲突问题。此外，咱们还会进一步对 Table 组件进行性能调优。以及探索一些更加简易的表格布局方式：

const Demo = () => {
	return (
  	<Table header={{ templateAreas: ` name address address name building no `, cells: [ { key: 'name', title: 'Name' }, { key: 'address', title: 'Address' }, { key: 'building', title: 'Building' }, { key: 'no', title: 'No' }, ], }} /> ); }; 复制代码

此外，咱们还计划添加 Summary Footer，以支持汇总需求。

DatePicker 重作

现有的 DatePicker 已经知足了大部分需求，可是从社区讨论来看。咱们还有更加深刻挖掘的机会，咱们将补全剩余的年选择器以及对应的范围选择器（讨论）。此外，咱们会调整相关日期时间选择器样式，进一步下降用户的认知成本。

🚀 持续更新

除了以上内容外，咱们也计划一部分持续更新的内容。这会在 4.0 中保持跟进，以更好的提高用户开发与使用体验。

🧶 改进无障碍体验

Ant Design 3.0 中对于无障碍体验支持度稍显欠缺，为此咱们计划调整组件结构并添加更多的 aria 标记以改进读屏体验。此外，咱们还准备优化现有的组件键盘交互方式，以确保能够有更好的全键盘交互体验。

🎯 开发者 API 规范

在演进过程当中，咱们发现少许 API 风格会与其余组件显得格格不入。对于 TypeScript 用户而言这不是什么问题，可是对于其余用户而言，这会形成记忆困扰。

所以咱们会整理出一份标准命名文档。该文档会包含现有的 API 列表以及恰当的命名规范。在新增功能时，也会依据该规范进行命名。以免将来可能产生的 API 分歧。固然，咱们也欢迎社区同窗在 PR 中进行反馈。

💼 React 严格模式

若是你尝试在 antd 组件外包裹 <React.StrictMode> 你会获得很多来自 antd 组件的警告信息。咱们在 3.0 时已经更新了一部分组件的生命周期方法。在 4.0 中，咱们仍将继续。

💡 改进开发者体验

在过去的维护过程当中，咱们发现某些 issue 会往复的出现。这些 issue 常见于一些使用规范或者应用场景的问题。为此，咱们决定在这边作出改进（其实从 3.0 开始，咱们已经在改进了）。在开发环境中，咱们对于一些意外状况（例如无效的 Moment 对象、Input 的 preffix/affix 动态调整致使的 Dom 结构变化等等）会在控制台进行提示。咱们确信，控制台是开发者在遇到问题时首先会关注的地方，在此提供适当的提示能够帮助快速定位问题。同时，对于一些特殊的使用方式或者场景。咱们会在相应的组件文档中提供 FAQ。从项目维护角度看，咱们的精力没法针对使用方式的 issue 作详细的解答。可是这些疑问是现实存在的，尤为对于新人开发者而言，一个 FAQ 能够帮助节省大量搜索时间。若是你有兴趣，也欢迎社区志愿者帮助一块儿完善开发者体验。

🐱 设计资产管理

Ant Design 不只仅是一套组件库，背后有着强大的设计体系做为支撑。咱们在 4.0 会同步更新最新的设计相关资产（Sketch 组件包、Kitchen 工具集、Design Token 等等），以方便设计师以及对设计感兴趣的同窗做为参考。也会对现有的组件设计样式进行微调，以提高视觉效果以及用户体验。

时间计划

如下是咱们的时间安排，其中部分组件更新是持续进行的。咱们会在 github 上创建相关 issue，也欢迎社区志愿者一同参与：

Q2

• 将须要废弃 API 标记为 Deprecated 状态，并于文档中清除。
• 底层组件进行预热。

Q3

• 创建 antd 4.0 分支，并进行文档更新。
• 底层组件开发。

Q4

• 发布 4.0 版本。

欢迎参与

在 4.0 开发过程当中，上述内容可能会有所调整。欢迎社区同窗提供宝贵的想法和建议，让咱们把 Ant Design 4.0 一块儿作的更方便好用！