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 一塊兒作的更方便好用！