前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >三分钟迁移 antd@4

三分钟迁移 antd@4

作者头像
coder_koala
发布2020-03-03 15:18:07
1.8K0
发布2020-03-03 15:18:07
举报
文章被收录于专栏:程序员成长指北

文章作者:陈帅等13w人 文章来源:https://zhuanlan.zhihu.com/p/109067115

antd@4 rc 发布已经有一段时间了(大概已经两周了),官网[1] 也已同步放出。最为一个酷爱尝鲜的人,当然要第一时间安装升级。在咨询了豆酱老师得到了api 不会修改的承诺之后,我已经在自己的项目中迁移完成。第一时间享受到了的 antd@4 各种优势。

? 升级点

首先对我而言最大的改进在于性能,select ,table 和 tree 已经全面支持了虚拟滚动,作为了早早的使用了 rc-tree来解决性能问题的人,antd@4 中提供自然是更好不过了,毕竟自己写样式和动态是非常复杂的。

重写的 table 和 from 解决很多遗留的疑难杂症,具体可以查看豆酱老师的 antd@4 系列文章[2],里面详细写了心路历程,在 form 中我们不需要使用 getFieldDecoratorForm.create 这两个方法。已 Pro 全区块为例,这两个方法分别出现了 87 和 22次,在我自己的一个维护项目中找到了142 个 getFieldDecorator ,更不用说为了封装组件 getFieldDecorator 被当成 props 传来传去的造成的各种复杂性提升了。在 v4 中我们终于可以摆脱它了。

瞧这都是删除的 diff

Table 现在也可以自动的获得宽度,并且拥有更加优秀的固定到侧边,已 Pro-Table[3] 为例,这里是 3.0 的 table。

在 4.0 中,不会发生高度错位的问题。

? 迁移方法

antd@4 变得更加多才多艺,带来了巨量的提升,那我们怎么才能使用到这么棒的 4.0 呢 , 其实很简单,Pro 已经全部迁移了一把[4] 。官方贴心的为我们提供了 codemod-v4,使用起来也是非常简单。

代码语言:javascript
复制
# 通过 npx 直接运行
npx -p @ant-design/codemod-v4 antd4-codemod src

# 或者全局安装
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4

# 运行
antd4-codemod src

值得注意的是 如果项目中使用了 <Icon type={type} /> 会转化成 LegacyIcon,这里需要检查一下,如果你不是组件库你一定是不需要 LegacyIcon,迁移之后一定要删除它,不然会造成图标文件被全量打入,它可是有 540K 左右的大小。

为了更加的语义化,icon 将从 i 标签修改为 span 标签,改完之后需要记得去查看一下有没有类似 i{}i.anticon 等用法,如果有可以修改为 span{}, span.antion 来保证迁移完成的样式问题。

另外由于 form 不兼容,codemod 不会自动帮你迁移到新的写法, 但是迁移到兼容包 @ant-design/compatible 方便在和新版本一起使用,而不用完全迁移。兼容包中 ant-from 类名将会更新为 ant-legacy-form ,如果你修改了 form 的默认样式记得检查一下,并且修改它。

如果碰到表单无法撑开的问题可以加入下面的代码:

代码语言:javascript
复制
:global {
  .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
     width: 100%;
   }
}

? Pro中使用

Pro 在第一时间也迁移了 antd@4 ,我们只需要在 create umi 中选择 ant-design-pro,即可获得最新的 4.0 分支代码。

代码语言:javascript
复制
❯❯❯ 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
>
> 使用 antd 4.0 可能会有一些兼容性问题,阅读下面的文档了解具体的改动
> 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
>

如果你想获得迁移到新的版本,可以按照上面的文档描述实现,但是 Pro 中支持通过设置 icon 配置菜单图标,在 4.0 中将无法得到支持,所以我们提供了相应的插件[5]来保留此功能。

使用方式如下 :

代码语言:javascript
复制
yarn add umi-plugin-antd-icon-config -D

并且在 config.ts 中设置

代码语言:javascript
复制
export default {
  plugins:[['umi-plugin-antd-icon-config', {}]],
}

无痛迁移 antd@4 就是这么简单。所有的官方区块也已经支持了 antd@4,请大家安心使用。如果想使用 antd 的 新特性,不打包全部的 icon, 可以尝试升级 ProLayout@5.0。

由于 4.0 的 icon 有一些删改,如果发现图标消失,请在 antd 官网中寻找合适的进行替换。

✨ 一个预告

Pro 4 已经发布有一些时间了,在内外部的各种实践中我们期望可以探索出一套最佳实践,sorrycc[6] 的文章中做了很深的思考。接下来我们会发布我们的解决方案。敬请期待!

“在看转发”是最大的支持

参考资料

[1]

官网: https://link.zhihu.com/?target=https%3A//next.ant.design/index

[2]

文章: https://www.zhihu.com/people/smith-jiang/activities

[3]

Pro-Table: https://link.zhihu.com/?target=https%3A//protable.ant.design/

[4]

一把: https://link.zhihu.com/?target=https%3A//github.com/ant-design/pro-blocks/issues/145

[5]

插件: https://link.zhihu.com/?target=https%3A//github.com/umijs/umi-plugin-antd-icon-config

[6]

sorrycc: https://link.zhihu.com/?target=https%3A//github.com/sorrycc/blog/issues/90

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-02-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员成长指北 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ? 升级点
  • ? 迁移方法
  • ? Pro中使用
    • ✨ 一个预告
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档