The Ant Design 4.0 UI framework has been released since The end of February. This article will only sort out the features that the author usually uses in the update content. For details, see the official address and update log

directory

  • Updated guidelines
  • Compatibility adjustment
  • Design specification adjustment
  • Important change!!
    • Upgrade the use of ICONS
    • The Form of rework
    • Table redo
    • DatePicker rewrite
    • Progress Adds the Steps child component
  • Other details

Updated guidelines

  • Manually review the code line by line to make changes.
  • The codemod CLI tool @ant-Design/codemod-V4 helps you quickly upgrade to VERSION V4
    • Submit your native code changes before running codemod CLI.
    # Run directly through NPX
npx -p @ant-design/codemod-v4 antd4-codemod src

Or global installation
# use NPM
npm i -g @ant-design/codemod-v4
# or use YARN
yarn global add @ant-design/codemod-v4

# run
antd4-codemod src
Copy the code
    • For the parts that cannot be automatically modified, Codemod will prompt you on the command line, and you are advised to manually modify them as prompted. After the modification, you can run the preceding command repeatedly.

Compatibility adjustment

  • As IE’s global market share continues to decline year by year, and its compatibility issues are notorious in the industry, this update only supports IE11.
  • React 16.9 is the lowest supported version of React. Some components start refactoring using hooks

Design specification adjustment

  • Row height changed from 1.5(21px) to 1.5715(22px)
  • Adjust the rounded corners from 4px to 2px
  • Global shadow optimization, adjusted to three layers of shadow control hierarchy
  • Some color adjustments

Important change!!

Upgrade the use of ICONS

  • ICONS can now be imported on demand from icon components@ant-design/iconsThe introduction of:
 import { Button } from 'antd';

  // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = (a)= > (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';
Copy the code
  • Reduced antD default package size by about 150 KB(Gzipped)

The Form of rework

The Form component has always been powerful but not easy to get started with, the API is a bit redundant (binding controls via form.getFieldDecorator is always a hassle), and the entire Form is re-rendered every time the data changes, This makes for poor performance in big data forms.

Simplify a lot, reduce the difficulty of learning, the amount of code is also less, performance is also improved, five-star praise.

  • getFieldDecoratorNo longer need. Directly in theForm.ItemthroughThe name attributeBind the value of the form control, and other options are written directly into itForm.Item
  • Form.create()No longer need. You no longer need to inject Form instances into components in this way
    • Now throughForm.useForm()Create Form entitiesconst [form] = Form.useForm()
    • For class Component, you can also get the entity by refformRef = React.createRef(); <Form ref={formRef}>
  • The new Form updates incrementally, updating only the fields that need to be updated.
    • If aForm.ItemSet updependenciesDepend on the properties. So what it depends onForm.ItemUpdate when theForm.ItemUpdate and verification will be triggered automatically (such as the verification of password confirmation needs to be triggered after password change);
    • If a field is setshouldUpdateProperties fortrue, then any changes to the Form will make theForm.ItemRerender, this property can also pass in a method that will be called every time the form is updated, providing the old value with the current value so you can compare it to whether it needs to be updated.
  • Alternative onFinish onSubmit. Previous versions required listeningOnSubmit eventManually triggeredvalidateFields. New version direct useOnFinish eventThe eventThe command is executed only after the verification succeeds
  • Alternative validateFieldsAndScroll scrollToField. 
    onFinishFailed = ({ errorFields }) = > {
  form.scrollToField(errorFields[0].name);
};
Copy the code
  • InitialValue is moved from the field to the Form. Incoming objects, unified management.
  • ValidateFields no longer supports callback and now returns a Promise object. You no longer need to determine whether errors is null.
  • A form. List component is provided, can be very convenient to achieve list field control. 
    <Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {. field} ><Input /></Form.Item>}
      <Button onClick={()= > add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>
Copy the code

Table redo

Change to using sticky style for fixed column implementation, thus greatly reducing the performance cost when the form has fixed columns. If Internet Explorer 11 does not support sticky, degrade it.

  • A column is retained when there are no columns
  • The new Summary API is used to summarize lines. It can realize the whole processing of table data more flexibly. The official example
  • sorterNow you can go throughmultipleSets the priority of multi-column sortingLevel, bycompareSetting sort logic 
    / / in the columns
sorter: {
    compare: (a, b) = > a.math - b.math,
    multiple: 2,},Copy the code
  • Tweaked the underlying logic, and nowFixedColumn, Expandable, ScrollIt can be mixed. providesbody APIFor custom table content implementations, which can be implemented such asVirtual scrolling effect.Virtual scroll official example

DatePicker rewrite

  • Decoupled from moment (still the default), you can use custom date libraries instead: official note
  • The panel is separated from the input box
  • Provides a full set of time, date, week, month, year selectors and corresponding range selectors. This can be set via the picker property, eliminating the need to implement special selectors via the controlled method of mode
  • You can select a separate start or finish time. In the previous version, the range selection had to be selected at the same time as the start time and the end time, which was a bad experience.
  • Range selection in the middle of the ~ becomes ->

Progress Adds the Steps child component

  • Can give progress strip step, quite interesting feature, feel will be used in the future.

Other details

  • Added a hover button to switch between dark themes in the lower right corner of the document.
  • Added for some selector componentsNo borderStyle, such asDatePicker, Select
  • Various componentsRemoval of attribute namesAnd alternatives
    • Remove LocaleProvider and use ConfigProvider instead.
    • Remove Mention and use Mentions instead.
  • Nested field paths using arrays such asuser.nameTo represent the{ user: { name: '' } }, now change to['user', 'name']
  • Tree, TreeSelect, and Select have been revamped to use virtual scrolling by default for performance optimization to support large data volume option rendering
  • Notification/Modal provides Hooks to fix missing contextModal. UseModal (), notification. UseNotification ()
  • Compatible with the package@ant-design/compatibleContains some obsolete components from older versions