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>
  );
};

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 一起做的更方便好用！点击此处查看 github issue。

我们在 1月 4 日的 SEE Conf 上也会分享 Ant Design 4.0 的幕后故事，欢迎围观直播，还可以参与知乎问题互动抢下届门票喔！~

文章转自：https://zhuanlan.zhihu.com/p/67511507
新版antd官网：https://next.ant.design/index-cn

本网站的服务器由提供