Design Ant Design 4.0 is out! · Issue # 21656 · ant-design / ant-design, Hacker News

It should be noted that the v3 version merged into the 3.x-stable branch in December and went into maintenance. We will still perform half-year maintenance work for the v3 version. Maintenance deadline is May

Design specification upgrade

We have adjusted the base rounded corners from 4px to 2px . The fillet itself is a detail, and in the middle and background scenes, we take efficiency as the first priority, so we reduce the visual details of the interface and improve the efficiency of interface information reading. In addition, we have adjusted the shadows to make them more consistent with real shadows, while also emphasizing the information hierarchy.

Dark theme

We have upgraded the color system based on the v3 version, and v4 provides a dark theme. You can click the switch theme function on the page to see the dark theme effect:

Borderless component

In the daily work, we found that there are lightweight selection components in some scenarios. So we provide a new borderless style that allows developers to more easily embed these components without overriding the style.

Compatibility adjustment

Ant Design 3.0 has made a lot of efforts to be compatible with older versions of IE. However, according to industry statistics, both the global and domestic IE9 / 53 browsers are shrinking with Windows system updates. We stopped supporting IE 9 / at 4.0 (but will still support IE 33) . Therefore, some low-performance components in the past will also gain performance with the new css features.

At the same time, we also upgraded the minimum version of React that v4 depends on to React 9. This means that the v4 version will provide more hooks to simplify your code.

In addition, we have removed some obsolete APIs that were warned in the v3 release. We strongly recommend that you upgrade your current project to the last version of v3 and update the deprecated API based on the warning message.

Smaller size

In antd @ 3.9.0 , we introduced the svg icon (Why use the svg icon?). The icon API using the string name cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 4.0, we adjusted the icon usage API to support tree shaking, reducing the default package size of Antant by about KB (Gzipped).

Legacy Icon usage will be discarded:

 { (Icon) ,  (Button) }  from 

 ;  const  const 
 Demo   () =>  ()    div>      Icon   type    smile 
 
/>       
 icon  
  smile 

 
/>     div 
> );    
 In 4.0, it will be introduced on demand: 
  import {Button} from 'antd';   // tree-shaking supported 

  - 
 import {Icon} from 'antd';  
    
 import {SmileOutlined} from '@ ant-design / icons';   const Demo=()=> (     
 
  - 
  
    
         }/>        );    // or directly import   import SmileOutlined from '@ ant-design / icons / SmileOutlined';   
 In addition, we have also removed some related dependencies to reduce gzipped bundle size: 
 
 
 
 Component rewrite 
  Form rewrite 
 
 Form, as a high-frequency component, has a slightly redundant API. The user needs to obtain the form instance through the HOC of Form.create, and use form.getFieldDecorator to perform data binding on the component. In addition, the entire form is re-rendered every time the data changes, which makes performance worrying in big data forms. In the v4 version, Form will come with a form instance. You can directly bind data through the  name  property of Form.Item, easier simplifying your code: 
 
    
 const {form}=this.props; 
  
  - 
 const onSubmit=()=> {
 
  - 
 form.validateFields ((err, values)=> {
 
  - 
 if (! err) {
 
  - 
 console.log ('Received values ​​of form:', values);  
  - 
}  
  - 
}); 
  - 
}; 
  
    
 const onFinish=(values)=> { 
    
 console.log ('Received values ​​of form:', values);  
    
};   
  - 
  
    
   
  - 
  
    
    
  - 
 {getFieldDecorator ('username') (
 
  - 
 , 
 
  - 
)}  
    
           
 We found that in most scenarios, the developer is actually only concerned with the values ​​that the form submits successfully. So we provide  onFinish , which will only fire after the form validation passes, and  validateFields  are no longer needed. 
 
 Besides, Form provides the hooks method  Form.useForm  to allow you to control the form example: 
    const 

 [form]  (= (Form)  
  
 useForm 
 ();   React 
 
 useEffect  (() => 
 {   
  form 
  
   setFieldValues ​​ ({  ... 

}); });  

 form  

 ({ {  form 
 } 
/>   
 At the same time, we provide the Form.List component, so that you can easily control the list fields:  
   (name) (=
  "
 names       { (
 fields , { add , 
 remove } 
=>       div>        {    fields    map  (
 field=}         
 onClick  
 ({ { () => 

 (add 
) ( (initialValue ) } > Add   (Button>        / 
 div> 
 
    
 Form   (List 
 
> 
 
 
 Table rewrite 

 

 Because we have adjusted the minimum requirements for compatibility, we have changed to the implementation of fixed columns using the  sticky  style, thus greatly reducing the performance consumption when the form has fixed columns. For IE  that does not support  sticky , we take downgrade processing. 
 At the same time, we provide a new  summary 

 API to achieve the effect of the summary line: 

  

 

 The sorter provides a multi-column sorting function: 
 

 In addition, we adjusted the underlying logic so that  fixedColumn ,  expandable  and  scroll  can now be mixed. Provides a  body  API for customizing table content implementations, from which you can implement effects such as virtual scrolling. 
 New DatePicker, TimePicker and Calendar 
 We have rewritten the date component as a whole to decouple it from  moment . You can generate Picker components for custom date libraries using the  generate  method we provide. To maintain compatibility, the default Picker component still uses  moment  as the date library. Please refer to  here  for custom date library.  

 In addition, we provide a full set of time, date, week, month, year selectors and corresponding range selectors. You can set it through the picker property, instead of implementing the special selector through the controlled method of mode: 
   RangePicker 

/> 
 showTime />  picker  
  week 
 
 
/>  picker    month 
 
 
/>  picker    year 
 
 
/>   
 For range selector, we have also optimized the interaction. You can now select the start or end time individually, and it perfectly optimizes the manual date entry experience. 
 
    Notification / Modal support Hooks 
 
 In the past, you may have encountered the problem that  Modal.xxx  and  Notification.xxx 
 call methods cannot get Context. This is because we will additionally create a React instance through  ReactDOM.render  for these syntactic sugars, which also causes the problem of context loss . In the new version, we provide the hooks method, which allows you to inject nodes where you need to get the context: 
 
     const   [api, contextHolder]  (= notification .  useNotification . ();   return  (     Context1  Provider  ()  (value) =
  
 (Ant) > 
     {
 
 /  contextHolder is in Context1 which means api will not get context of Context1  /   
     { contextHolder 
}       Context2  Provider 
 ()  (value) =
  
 (Design) > 
       {
 
 /  contextHolder is out of Context2 which means api will not get context of Context2  /  
}       Context2  (Provider  > 
     Context1  (Provider  > 
 );    
 Virtual scroll 
 
 In v4, we have upadated Tree, TreeSelect, and Select. By default, they use virtual scrolling technology to optimize their performance to carry a large amount of option rendering.  
  Living demo  
 In addition, keyboard interaction and accessibility are optimized.   More new features / features / optimizations 
   ConfigProvider provides  direction 
 configuration to support  rtl  language internationalization. 

 Form and ConfigProvider support  size  setting including component size.  

 Typography adds  suffix  attribute.  

 Progress adds  steps  subcomponent. 


 TextArea supports  onResize .  

 Grid uses  flex  layout.  

 ...... 

 
 You can click  here  to see the full update log. 
 How to upgrade 
 To make the upgrade as easy as possible, we maintain maximum compatibility. But there are still some breaking changes that need attention. You can first try to migrate using the codemod tool provided by us, and manually migrate some parts that cannot be migrated. Please refer to  the document  for upgrading. 
 Above all 
 The Birth of Ant Design 4.0 is inseparable from the contributions and support of community volunteers. Thanks to  @ saeedrahimi  for the internationalization of  rtl , [@shaodahong] (https: /github.com/shaodahong) Contributions to Compatibility Packs, and everyone involved in helping development. It is your contribution to open source that makes Ant Design even better! 
   

 引言 
 在 在 SEE Conf 之 际 发布 了  4.0 rc  版本。 经过 1 个 多 月的 反馈 收集 和 调整 之后 我们 终于 迎来 了 4.0 的 正式！！ 在 此 提供 反馈 、 以及 贡献 的 人。 我们 会 结合  rc  版本 已经 涉及 的 更新 以及 一些 比较 重要 的 内容 于此 列举。 完整 更新 文档 可以  (点击 此处) 。 v4 文档 地址 ： 
 https://ant.design   
 需要 注意 的 是 ， v3 版本 于 4000 年  月 合入  3.x-stable  分支 并 进入 维护。 我们 仍然 3 v3 版本 进行 半年 的 维护 工作。 维护 截止 日期为  (年 5 月。)  
 设计 规范 升级 
 我们 将 基础 圆角 由  4px  调整 为  2px 。 中 后台 产品 以 效率 为 第一 级 ， 圆角 样式 的 细节 ， 更 小 的 圆角 从 视觉 上 减少 界面 细节 ，提升 了 信息 阅读 效率。 此外 ， 我们 对 阴影 进行 了 调整 使其 更 符合 也 同时 将 信息 层级 更好 体现。  

 

	

			
	

			


		
			
			
					
			
		





  暗色 主题 
 3 3 v3 版本 色彩 系统 进行 了 升级 4 v4 提供 了 暗色 主题 在 中 点击 切换 主题 功能 查看 暗色 主题 效果 ： 

   无 边框 组件 
 
 在 业务 中 ， 我们 发现 有些 场景 会 存在 的 选择 组件。 了 一种 新 的 无 让 开发 者 可以 更 简单 的 嵌入 这些 组件 而不用 额外 覆盖 样式。 


  
 兼容性 调整 
 Ant Design 3.0 为了 兼容 旧版 IE 做出 了 非常 多 的。 然而 根据 E E IE9 / 33 随着 器 无论 是 在 全球 还是 国内 份额 都 随着 Windows 随着 更新 而 在 不断 缩减。 我们 在 4.0.对 ， 停止 对 IE 9 /  E 支持 工作 (但 仍然 会 E IE 33)。 因而 过去 一些 低 性能 的 组件 ， 也会 随着 ss css 特性 而 性能 提升。 




 
 与此同时 ， 我们 也 将 v4 的 ct React 最低 要求 升级 到 了 React . 9。 这 意味着 4 v4 版本 将会 提供 的 hooks 以 你 的 代码。 
 此外 ， 我们 也 将 在 v3   废弃 警告 的 一些 废弃 API 进行 了 移除。 我们 强烈 建议 将 当前 3 3 v3 ， 最后 根据 根据 根据 Warning 信息 将 废弃 API 进行 更新。 
 更 小 的 尺寸 
 在  [email protected] 

 了 ， 我们 引入 v svg 图标 ( v svg 图标？  图标 图标 了 图标 图标 API 无法 做到 按需 v 引入 v v svg 图标文件 ， 这 大大 增加 了 产物 的 尺寸。 在 4.0 ， 我们 调整 了 图标 使用 API 从而 sha tree shaking ， td antd 默认 包 体积 约 384 KB (Gzipped)。 
 旧版 Icon 使用 方式 将 被 废弃 ： 
   (import 

 { (Icon) ,  (Button) }  from 
  ' antd)  '

 ;  const  const 
 Demo   () =>  ()    div>      Icon   type    smile 
 
/>       
 icon  
  smile 

 
/>     div 
> );    
 4.0 中 会 采用 按需 引入 的 方式 ： 
  import {Button} from 'antd';  // tree-shaking supported 

  - 
 import {Icon} from 'antd';  
    
 import {SmileOutlined} from '@ ant-design / icons';   const Demo=()=> (     
 
  - 
  
    
         }/>        );    // or directly import   import SmileOutlined from '@ ant-design / icons / SmileOutlined';   
 此外 ， 我们 也 对 相关 依赖 进行 精简 ， 降低 打包 (z Gzipped) ：  
 
 
 组件 重做 
 
 Form 重做 
 
 Form 作为 高频 使用 的 组件 ， API 略显 冗余。 用户 需要  Form.create  的 HOC 方式 获得 表单 ， 而 通过  form.getFieldDecorator  来 对 组件 数据 数据。 此外 ， 每次 数据 变更 便会 进行 整个 表单 的 重新 ， 这 使得 在 数据 表单 中 性能。 4 4 4 Form 将 自带 表单 实例 ， 你 可以 直接 通过 Form.Item 的  name  属性 进行 数据 绑定 ， 从而 简化 你 的 代码 ：  
    
 const {form}=this.props; 
  
  - 
 const onSubmit=()=> {
 
  - 
 form.validateFields ((err, values)=> {
 
  - 
 if (! err) {
 
  - 
 console.log ('Received values ​​of form:', values);  
  - 
}  
  - 
}); 
  - 
}; 
  
    
 const onFinish=(values)=> { 
    
 console.log ('Received values ​​of form:', values);  
    
};   
  - 
  
    
   
  - 
  
    
    
  - 
 {getFieldDecorator ('username') (
 
  - 
 , 
 
  - 
)}  
    
           
 我们 发现 大多数 场景 下 ， 开发 者 其实 关注 表单 提交 的 值 我们 提供  onFinish  ， 其 只会 在 表单 验证 通过 后 ， 而  validateFields  不在 需要。 
 
 ， ， Form 提供 了 hooks 方法  Form.useForm  允许 你 对 表单 示例 进行 控制： 
 
    const 
 [form]  (= (Form)  
  
 useForm 
 ();   React 
 
 useEffect  (() => 
 { 
  form 
  
   setFieldValues ​​ ({  ... 

}); });  

 form  

 ({ {  form 
 } 
/>   
 了 ， 我们 提供 了 Form.List 组件 ， 使 你 非常 方便 的 实现 字段 的 控制 ：  
   (name) (=
  "
 names       { (
 fields , { add , 
 remove } 
=>       div>        {    fields    map  (
 field=}         
 onClick  
 ({ { () => 

 (add 
) ( (initialValue ) } > Add   (Button>        / 
 div> 
 
    
 Form   (List 
 
> 
 
  Table 重做 
 
 由于 我们 提升 了 兼容性 的 最低 要求 ， 我们 改成  sticky  样式 进行固定 列 的 实现 ， 因而 大大 了 表单 拥有 固定 列 时 性能 消耗。 而 对于 不  sticky  的 IE  ， 我们 采取 降级 处理  
 同时 ， 我们 提供 了 新 的  API  用于 实现 总结 行 的 效果 ： 

  
 
 对于 sorter 提供 了 多 列 排序 的 功能 ： 
 

 此外 ， 我们 调整 了 底层 逻辑 ，  fixedColumn  、  expandable  、  scroll  可以 混合 使用。 提供 了  body  API 用于 自 定义 表格 内容 实现 ， 你 可以 实现 诸如 虚拟 的 效果。 
  全新 DatePicker 、 TimePicker 与 Calendar 
 
 我们 对 日期 组件 进行 了 整体 重写 ， 因而 将 其  moment  进行 解耦。 你 可以 通过 我们 提供 的  generate  方法 生成 定义 定义 的 的 Picker 组件。 为了 保持 ， 默认 的 Picker 组件仍然 使用  moment  作为 日期 库。 自 定义 日期 库 请 此处。  

 此外 ， 我们 提供 了 全套 的 时间 、 日期 周 、 月 、 年 对应 的 选择 选择。 你 可以 通过  picker  属性 进行 设置 ， 不再 需要 通过  mode  的 受控 方法 来 实现特地 的 选择 器 ： 
   RangePicker 

/> 
 showTime />  picker  
  week 
 
 
/>  picker    month 
 
 
/>  picker    year 
 
 
/>   
 在 范围 选择 器 上 ， 我们 也 交互 进行 了 优化。 你 的 选择 开始 结束 结束 完美 完美 手动 输入 输入 日期 的 体验。 
 
    Notification / Modal 提供 Hooks 
 
 在 过去 版本 ， 你 或许 会 遇到  Modal.xxx  和  (Notification.xxx) 调用 方法 无法 获得 Context 的 问题。 这 是 语法 糖 会 额外 通过  ReactDOM.render  一个 ct React 实例 ， 这 也 导致 了 context 丢失 的 问题。 在 新版 ， s hooks 方法 ， 让 你 可以 将 节点 注入 到 需要 获得context 的 地方 ： 
 
     const   [api, contextHolder]  (= notification .  useNotification . ();   return  (     Context1  Provider  ()  (value) =
  
 (Ant) > 
     {
 
 /  contextHolder is in Context1 which means api will not get context of Context1  /   
     { contextHolder 
}       Context2  Provider 
 ()  (value) =
  
 (Design) > 
       {
 
 /  contextHolder is out of Context2 which means api will not get context of Context2  /  
}       Context2  (Provider  > 
     Context1  (Provider  > 
 );     虚拟 滚动 
 v4 中 ， 我们 将 Tree 、 TreeSelect 、 Select 进行 了 改造 ， 其 默认 使用 性能 优化 以 承载 大 数据 量 的 选项 渲染。 
 
  (Living demo    
 此外 ， 也 对 键盘 交互 以及 无障碍 进行 了 优化。   更多 新 功能 / 特性 / 优化 部分 
   ConfigProvider 提供  direction 
 配置 以 支持  rtl  语言 国际 化。 

 Form 与 ConfigProvider 支持  size  设置 包含 组件 尺寸。  

 Typography 增加  suffix  属性。  

 Progress 增加  steps  子 组件。  

 TextArea 支持  onResize 。  

 Grid 使用  flex  布局。  

 ...... 

 
 你 可以 点击  (此处 

 查看 完整 更新 日志。)  
 如何 升级 
 为了 尽可能 简化 升级 ， 我们 了 最大 兼容。 仍然 一部分 change breaking change 需要。 你 使用 我们 提供 的 em codemod 工具 进行 迁移 ， 对 部分 无法 迁移 ​​的 内容进行 手工 迁移。 升级 请 参考  该 文档   
 以上 
 Ant Design 4.0 的 诞生 离不开 社区 志愿者 的 贡献 与 支持 ， 感谢  @ saeedrahimi 



了  rtl  的 国际 化 功能 ，  @ shaodahong  对于 兼容 包 的 贡献 ， 以及 每个 参与 帮助 开发 人。 是 的 让 Design Ant Design 变得 更加 美好！        


    (Read More)