组件库重构，支持antd 4.x

前言

React 15.x 升 React 16.x 是一次内部重构，对于使用者来讲，原来的使用方式仍然可用，额外加了新的功能；而Antd 3.x 升 Antd 4.x, 在个人认知范围里，能够称做是飞(po)跃(huai)性的重构, 由于之前不少写法都不兼容了，组件代码重构，使用者的代码也得重构。但此次重构解决了3.x的不少问题，好比：

• 因为Icon没法按需加载致使打包体积过大；
• 因为Form表单项变化会形成其余表单项全量渲染，大表单会有性能问题；
• 时间库moment包体积太大。

说这么多，仍是直接来张图吧，我我的项目的打包体积变化：Antd 3.x VS Antd 4.x

升4.x以后，gzip少了150kb，也就是包大小少了500多kb，这不香么。

关于升级

我和个人小组，为了用更爽的方式来开发迭代，针对于antd的Form和Table等组件作了一些简单的二次封装，造成了组件库antd-doddle。虽然Antd 4.x推出快小半年了，受疫情影响，今年业务迭代比较缓慢，没有新系统，也以为暂时不必去重构业务代码，因此一直只关注不动手。最近比较闲，组件库针对Antd 4.0作了适应性重构，做为一个胶水层，最大程度的去磨平4.0版本Form这种破坏性变更，减小之后业务代码升级4.x版本的调整量。

Antd 4.x到底作了哪些变化，在官方文档能够看到。

这篇文章主要讲针对于4.x Form的变化，我重构组件库的思路。

Antd-doddle 2.x文档地址, 支持4.x: http://doc.closertb.site, 首次加载较慢，请耐心等候。

Antd-doddle 1.x文档地址, 支持3.x: http://static.closertb.site, 首次加载较慢，请耐心等候。

试用项目Git 地址

项目在线试用地址, 请勿乱造

FormGroup重构思路

Form组件变化

4.x 中除了Icon，最大的更改就在于Form，我本身感觉到的变化是：

1. 舍去了Form.create高阶组件包裹表单的写法，而改采用hooks或ref的方式去操做form实例；
2. 之前每一个表单组件的数据绑定是经过getFieldDecorator这个装饰方法完成，如今改由FormItem来完成；
3. 初始values设置，之前是经过getFieldDecorator设置，而且是动态的，即value改变，表单值跟随改变。如今是在Form最外层设置，可是以defaultValue形式设置，即value改变，表单值不跟随变化；
4. 最大的改变就是增量式更新，3.x版本，任意表单项改变，都会形成Form.create包裹的所有表单项从新render，这是很是大的性能消耗；而4.x以后，任意表单项改变，只有设置了shouldUpdate属性的表单项有可能执行render，相似于React 16新增的componentShouldUpdate；

根据上面的变化点，由外向内层层剖析，针对性的作重构；

FormGroup的变化

因为之前FormGroup组件，除了收集form方法和公共配置，也做为一个标识，接管了组件内部的渲染层；3.x版本其form实例由Form.create，即业务代码提供；4.x与其类似，只不过是经过hooks生成form实例。

变化点主要在于4.x版本Form要提供initialValues的设置，且这是一个defaultValue的设置，因此咱们须要拓展，让其支持values为异步数据时，表单项的值能跟随其改变, 其原理很简单，监听value的变化，并重置表单数据，实现代码以下：

// 伪代码，只涉及相关改动
const FormGroup = (props, ref) => {
  const { formItemLayout = layout, children, datas = {}, ...others } = props;

  // 兼容了非hooks 组件调用的写法，内部再声明一个ref， 以备用；
  const insideRef = useRef();
  const _ref = ref || insideRef;

  const formProps = {
    initialValues: {}, // why
    ...formItemLayout,
    ...others
  };
  // 若是datas 值变化，重置表单的值
  useEffect(() => {
    const [data, apiStr] = Type.isEmpty(datas) ? [undefined, 'resetFields'] : [datas, 'setFieldsValue'];
    // 函数式组件采用form操做；
    if (props.form) {
      props.form[apiStr](data);
      return;
    }
    // 若是是类组件，才采用ref示例更新组件
    if (typeof _ref === 'object') {
      _ref.current[apiStr](data);
    }
  }, [datas]);


  return (
    <Form {...formProps} ref={_ref}>
      {deepMap(children, extendProps, mapFields)}
    </Form>);
};

上面有句代码 initialValues: {},会让人困惑, 为何没有赋值为datas呢；这个又是antd的一个隐藏知识点，举个例子：

form.setFieldsValue({ name: 'antd', age: 18 }); 

// 后面想清空
form.setFieldsValue({}); 

// 最后发现上面清空根本没生效，缘由能够本身想一想

因此当咱们想作一些需求，好比先编辑一个表单，表单中有数据了；但没作操做关闭了，而后点了新增按钮，传了一个空对象，这事就发现bug了,上一次编辑的数据还在，除了这个，还有一些其余的业务场景会用到，在antd中也有一个相似的issue：

在表单里有不少元素且拥有initialValue的时候, 如何简单的清空表单

因此在这个组件设计上，就将initialValues默认置空数据，而后设置的数据采用setFieldsValue来重置。若是想清空表单，直接传入一个空数据，被组件检测到后，内部调用resetFields来实现。快夸一下天才的我。

FormRender的变化

相比于FormGroup的变化，子组件FormRender相比较就变化小一点，主要在适应第二点变更，用代码的方式更直观：

// 3.x
const render = renderType[type];
content = (
  <FormItem
    label={name}
    rules={gerateRule(required, pholder, rules)}
    {...formProps}
  >
   {getFieldDecorator(key, {
     initialValue: data,
     rules: gerateRule(required, pholder, rules)
   })(
    render({ field: common, name, enums: selectEnums, containerName }))}
  </FormItem>);

重构以后

// 4.x
const render = renderType[type];
content = (
  <FormItem
    name={key}
    label={name}
    rules={gerateRule(required, pholder, rules)}
    {...formProps}
  >
    {render({ field: common, name, enums: selectEnums, containerName })}
  </FormItem>);

联动表单的实现变化

主要实现三种联动，根据其余表单项的变化，来改变关联表单项

• 是否渲染或改变渲染方式；
• 是否禁用；
• 校验规则

因为之前每次表单项变化，都会引发其余表单项render，因此能够暴力的经过FormGroup增长数据层(useRef)与监(bao)听(guo)每一个表单项的onChange来实现;

新的Form新增了onFormChange回调来支持增量式数据收集，但第四点变更，让老的方案GG；表单项的联动须要依赖shouldUpdate来实现，这也是官方推荐的方案；

其本质是，设置了shouldUpdate属性的FormItem，其仅仅做为一个容器，这个容器监听了相似onFormChange这种事件，而后根据shouldUpdate来判断是否须要从新渲染容器内的子元素，子元素渲染实现是一个应用React renderPrrops的设计模式；

因此联动方案彷佛变得更简单了, 就多一层FormItem包裹，看部分代码实现：

const render = renderType[type];
content = shouldUpdate ? (
  <FormItem shouldUpdate={shouldUpdate} noStyle>
    {form => { 
      const datas = form.getFieldsValue();
      const require = typeof required === 'function' ? required(initData, datas) : required;
      const disabled = typeof disableTemp === 'function'
      ? disableTemp(initData, datas) : disableTemp;
      return finalEnable(initData, datas) ?
      (<FormItem
        key={key}
        name={key}
        label={name}
        dependencies={dependencies}
        rules={gerateRule(require, pholder, rules)}
        {...formProps}
        {...otherFormPrrops}
      >
        {render({ field: Object.assign(common, { disabled }), name, enums: selectEnums, containerName })}
      </FormItem>) : selfRender(datas, form)}
    }
  </FormItem>) ： /* 非联动实现 */

其余

除了上面这些变化，其实还有不少边边角角的变化，好比：

• 搜索框组件其实也是依赖FormGroup来实现的，因此内部也作了一些小调整，但业务代码就彻底不须要作改动；
• 之前支持了RangePicker 的数据自动组装，但因为4.x 支持DayJs 和 Moment 时间库切换，加上initValues的提早设置，这个功能暂时就取消了；
• 样式文件的按需加载；

还有，还有一些未考虑好的的新增特性。

使用对比

实现一个小的编辑框，相似下面这样：

重构前的代码

import React from 'react';
import { FormGroup } from 'antd-doddle';
import { editFields } from './fields';

const { FormRender } = FormGroup;

function Edit({ id, form, data }) {
  const { getFieldDecorator } = form;

  return (
    <FormGroup getFieldDecorator={getFieldDecorator} required>
      {editFields.map(field => <FormRender key={field.key} field={field} data={data} />)}
    </FormGroup>
  );
}

export default FormGroup.create()(Edit);

重构以后

import React from 'react';
import { FormGroup } from 'antd-doddle';
import { editFields } from './fields';

const { FormRender } = FormGroup;

function Edit({ id, data, ...others }) {
  const [form] = FormGroup.useForm();

  return (
    <FormGroup required form={form} datas={data}>
      {editFields.map(field => <FormRender key={field.key} field={field} />)}
    </FormGroup>
  );
}

export default Edit

不仔细看，是否是不易察觉到变化

重构感觉

由于用的还不像3.x版本那么熟练，不少特性还没用上，因此先重构一个简易版本，来完成平常场景，后面再慢慢迭代。

若是感兴趣，能够fork项目或查看项目文档

文章原地址