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 版本 。:beers:

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

:first_quarter_moon: 兼容性调整

我们将在 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 废弃

:package: 减小体积

优化图标尺寸

在 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.create()
getFieldDecorator

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 已经满足了大部分需求，但是从 社区讨论 来看。我们还有更加深入挖掘的机会，我们将补全剩余的年选择器以及对应的范围选择器（ 讨论 ）。此外，我们会调整相关日期时间选择器样式，进一步降低用户的认知成本。

:rocket: 持续更新

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

改进无障碍体验

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

:dart: 开发者 API 规范

在演进过程中，我们发现少量 API 风格会与其他组件显得格格不入。对于 TypeScript 用户而言这不是什么问题，但是对于其他用户而言，这会造成记忆困扰。

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

:briefcase: React 严格模式

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

:bulb: 改进开发者体验

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

:cat: 设计资产管理

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

时间计划

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