Ant Disign 4.0 升级实践扑街指南 (一)

2020/3/4 5:01:21

编程Tag： typescript vue.js 前端 Node.js React.js

本文主要是介绍Ant Disign 4.0 升级实践扑街指南 (一)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

背景

我们都知道， AntD 最近喜提了4.0, 更新了许多新特性，看的我是心花怒放，喜不自胜。更贴心的是还提供了升级工具，看了一些文章介绍说能三分钟升级。于是周六的时候，懒觉我也不睡了，跑到公司开始了升级之旅。

注：此篇文章仅是我个人升级的时候遇到的一些问题，不具代表性，仅供参考。

正文

首先是从这篇文章开始的：

很多公众号也转发了这篇文章，写的很吸引人，我也想体验一下。

扑街第一步: antd4-codemod

看官方介绍：
codemod running

我滴龟龟，也太好了吧！！一键转换美滋滋～

马上安排！

于是我敲下了第一行命令：

sudo npm i -g @ant-design/codemod-v4

全局安装了这个代码转换工具，很顺利。

扑街第一步：antd4-codemod

运行 antd4-codemod src

控制台:

出师未捷先报错。。

问题不大，我们老实人不怕这个。

缺少core-js, 那就装一个。

安装之后，还是同样的报错。。。

一番搜索之后，在一个不起眼的文章里找到了答案：

全局安装，果然不报错core-js找不到了，问题解决。

(中间也爆了其他的错，花了不少时间，不过都一一解决了。)

直到又爆了新的错误：

搜索到一些答案：

按照文章中的提示，逐个修改，等待安装。

运行一下，还是不行。。。

表情逐渐凝固。

这时候已经六七点了，看看外面，天都黑了。

这第一步还没迈出去，开始暴躁。

我是谁，我在哪，我为什么要用这个 antd4-codemod...

冷静一下，打了局农药单排，输了。

然后开始手动一个个改文件。

扑街第二步: Form initialValues

想着今天一定，至少，得改完一个页面看看。

就挑了个简单的，一个Form表单页。

Form v3 & v4

去除 Form.create

v4 的 Form 不再需要通过 Form.create() 创建上下文。Form 组件现在自带数据域，因而 getFieldDecorator 也不再需要，直接写入 Form.Item 即可：

// antd v3
const Demo = ({ form: { getFieldDecorator } }) => (
  <Form>
    <Form.Item>
      {getFieldDecorator('username', {
        rules: [{ required: true }],
      })(<Input />)}
    </Form.Item>
  </Form>
);

const WrappedDemo = Form.create()(Demo);

改成：

// antd v4
const Demo = () => (
  <Form>
    <Form.Item name="username" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
  </Form>
);

由于移除了 Form.create()，原本的 onFieldsChange 等方法移入 Form 中，通过 fields 对 Form 进行控制。

表单控制调整

Form 自带表单控制实体，如需要调用 form 方法，可以通过 Form.useForm() 创建 Form 实体进行操作：

// antd v3
const Demo = ({ form: { setFieldsValue } }) => {
  React.useEffect(() => {
    setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form>
      <Form.Item>
        {getFieldDecorator('username', {
          rules: [{ required: true }],
        })(<Input />)}
      </Form.Item>
    </Form>
  );
};

const WrappedDemo = Form.create()(Demo);

改成：

// antd v4
const Demo = () => {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form form={form}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

有个很简单列表页里包含一个Form，点击按钮，查看数据。

Kapture 2020-03-02 at 21 01 50

codeOpen链接：
https://codepen.io/scaukk/pen...

提了个issue:
https://github.com/ant-design...

这个问题，一个热心网友说：

加一个effect 每次显示modal的时候重置, 这个resetFields重置的每次都是initialValue的值你每次确定的时候重置的值其实都是上一次的, 所以不会变

偏右的回复：

resetFields 是重置回 initialValues 的值，并且 initialValues 只用于第一次初始化，不响应后续的变化，你需要转换一下思路：https://codepen.io/afc163-147...

在官网中，也找到了这样的描述：

在 v3 版本中，修改未操作的字段 initialValue 会同步更新字段值，这是一个 BUG。但是由于被长期作为一个 feature 使用，因而我们一直没有修复。在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。

所以， initialValue 只能作为组件初次挂载的时候生效。

偏右的做法和文档推荐的一致：

render: (text, record) => (
  <span onClick={() => {
    setVisible(true)
    setRecord(record)
    form.setFieldsValue({
      name: record.name,
    });
  }}>
    <a>查看</a>
  </span>
),