Shulou(Shulou.com)06/01 Report--

How to migrate antd@4, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Antd@4 rc has been released for some time (about two weeks), and the official website [1] has been released at the same time. If you are most fond of trying something new, of course you should install the upgrade as soon as possible. Enjoy all kinds of advantages of antd@4 for the first time.

Upgrade point

First of all, the biggest improvement for me is performance. Select, table and tree have fully supported virtual scrolling. As people who used rc-tree to solve performance problems early, it is better to provide nature in antd@4. After all, it is very complex to write your own styles and dynamics.

Rewrite table and from to solve a lot of remaining problems and complications, you can see the bean paste teacher's antd@4 series [2], which details the mental process, in form we do not need to use getFieldDecorator and Form.create these two methods. Taking the whole block of Pro as an example, these two methods have appeared 87 times and 22 times respectively. I have found 142getFieldDecorator in one of my own maintenance projects, not to mention the increased complexity caused by the encapsulation component getFieldDecorator being passed back and forth as props. We can finally get rid of it in v4.

Look, these are all deleted diff.

Table can now also automatically get the width, and has a better fixed to the side, has Pro-Table [3] as an example, here is 3.0 table.

In 4.0, the problem of height dislocation does not occur.

Migration method

Antd@4 has become more versatile, bringing a lot of improvements, so how can we use such a great 4.0, in fact, it is very simple, Pro has all migrated a [4]. The official thoughtfully provided us with codemod-v4, which is also very easy to use.

# run directly through npx

Npx-p @ ant-design/codemod-v4 antd4-codemod src

# or global installation

# using npm

Npm I-g @ ant-design/codemod-v4

# or use yarn

Yarn global add @ ant-design/codemod-v4

# run

Antd4-codemod src

It is worth noting that if used in the project will be converted into LegacyIcon, need to check here, if you are not a component library you must not need LegacyIcon, after the migration must delete it, otherwise the icon file will be fully entered, it is about 540K in size.

In order to be more semantic, icon will change the tag from I to span. After the change, you need to check to see if there are any uses such as I {}, i.anticon, etc., and if so, you can change it to span {}, span.antion to ensure the completion of the migration.

In addition, due to the incompatibility of form, codemod will not automatically help you migrate to the new way of writing, but migrate to the compatibility package @ ant-design/compatible to make it easier to use with the new version without having to migrate completely. The ant-from class name in the compatibility package will be updated to ant-legacy-form. If you change the default style of form, remember to check it and modify it.

If you encounter a problem that the form cannot be opened, you can add the following code:

: global {

.ant-legacy-form-item. Ant-legacy-form-item-control-wrapper {

Width: 100%

}

}

Used in Pro

Pro also migrated antd@4 in the first place, we only need to select ant-design-pro in create umi to get the latest 4. 0 branch code.

❯❯❯ create-umi

? Select the boilerplate type ant-design-pro

? Which language do you want to use? TypeScript

? Want to use better and faster antd? Yes

>

There may be some compatibility issues when using antd 4.0. read the following documentation for specific changes

> There may be some compatibility issues when using antd 4. 0. Read the following documents for specific changes

> https://next.ant.design/docs/react/migration-v4-cn

>

If you want to migrate to a new version, you can follow the documentation described above, but the Pro support by setting the icon configuration menu icon will not be supported in 4.0, so we provide the corresponding plug-in [5] to retain this feature.

The mode of use is as follows:

Yarn add umi-plugin-antd-icon-config-D

And set it in config.ts

Export default {

Plugins: [['umi-plugin-antd-icon-config', {}]]

}

Painless migration of antd@4 is as simple as that. All official blocks have also supported antd@4, please feel free to use it. If you want to use the new features of antd and do not package all the icon, you can try to upgrade ProLayout@5.0.

As there are some deletions in the 4. 0 icon, if you find that the icon disappears, please look for a suitable one on the antd official website.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.