组件库重构,支持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

组件库重构,支持antd 4.x_第1张图片

组件库重构,支持antd 4.x_第2张图片

升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 (
    
{deepMap(children, extendProps, mapFields)}
); };

上面有句代码 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 = (
  
   {getFieldDecorator(key, {
     initialValue: data,
     rules: gerateRule(required, pholder, rules)
   })(
    render({ field: common, name, enums: selectEnums, containerName }))}
  );

重构之后

// 4.x
const render = renderType[type];
content = (
  
    {render({ field: common, name, enums: selectEnums, containerName })}
  );

联动表单的实现变化

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

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

由于以前每次表单项变化,都会引起其他表单项render,所以可以暴力的通过FormGroup增加数据层(useRef)与监(bao)听(guo)每个表单项的onChange来实现;

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

20200629215947

其本质是,设置了shouldUpdate属性的FormItem,其仅仅作为一个容器,这个容器监听了类似onFormChange这种事件,然后根据shouldUpdate来判断是否需要重新渲染容器内的子元素,子元素渲染实现是一个应用React renderPrrops的设计模式;

所以联动方案似乎变得更简单了, 就多一层FormItem包裹,看部分代码实现:

const render = renderType[type];
content = shouldUpdate ? (
  
    {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) ?
      (
        {render({ field: Object.assign(common, { disabled }), name, enums: selectEnums, containerName })}
      ) : selfRender(datas, form)}
    }
  ) : /* 非联动实现 */

其他

除了上面这些变化,其实还有很多边边角角的变化,比如:

  • 搜索框组件其实也是依赖FormGroup来实现的,所以内部也做了一些小调整,但业务代码就完全不需要做改动;
  • 以前支持了RangePicker 的数据自动组装,但由于4.x 支持DayJs 和 Moment 时间库切换,加上initValues的提前设置,这个功能暂时就取消了;
  • 样式文件的按需加载;

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

使用对比

实现一个小的编辑框,类似下面这样:

组件库重构,支持antd 4.x_第3张图片

重构前的代码

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 (
    
      {editFields.map(field => )}
    
  );
}

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 (
    
      {editFields.map(field => )}
    
  );
}

export default Edit

不仔细看,是不是不易察觉到变化

重构感受

因为用的还不像3.x版本那么熟练,很多特性还没用上,所以先重构一个简易版本,来完成日常场景,后面再慢慢迭代。

如果感兴趣,可以fork项目或查看项目文档

文章原地址

你可能感兴趣的:(antdesign,react.js,javascript)