用 ProComponents 进行开发提效（一）

最近在做一个中后台管理系统，组件库用的 antd，基本场景都能轻松 cover 掉，但是最近业务逻辑突然变复杂了，不得不加班做需求。后来无意间发现了 ProComponents 这个基于 antd 的组件库，瞬间提效很多，产品直夸我是代码小能手！

ProComponents 是一个基于 Ant Design 组件库开发的一系列高级组件，旨在提供更加快捷和简洁的开发体验，特别是对于后台管理界面和复杂数据展示的场景。它们通常封装了更多默认行为和模板，以便开发者能够以更少的代码实现丰富的功能。

布局、表格、表单是中后台管理系统绕不开的三个话题，而 ProComponents 就内置了这三个组件，开箱即用，非常方便：

ProLayout：一个高级布局组件，提供了标准的后台管理系统布局，包括导航菜单、页头、页脚和内容区域，并且支持多种布局模式，如侧边菜单、顶部菜单等。
ProTable：一个高级表格组件，提供了丰富的功能，如搜索、过滤、排序、分页、展开、行选择等，能够快速构建出复杂的数据表格。

ProForm：一个高级表单组件，封装了表单的常见布局和行为，简化表单的创建和维护工作，同时支持和 ProTable 的深度集成，方便实现查询和数据提交。

本篇先为大家介绍表单的场景，为什么 ProComponents 能够带来提效：

更丰富的组件

ProComponents 表单在 antd 表单的基础上增加了常用的组件，例如登录或注册表单中都会有获取验证码这种形式的表单项：

如果自己写获取验证码的话还挺麻烦的，要写倒计时等逻辑，但是 ProComponents 给你封装好了，开箱即用：

tsx 复制代码

<ProFormCaptcha
  required
  label="验证码"
  placeholder="请输入收到的手机验证码"
  onGetCaptcha={() => fetch('发送验证码接口')}
  name="code"
/>

再例如在电商的业务中，经常会有输入金额的表单项，里面要支持各种国家的货币，还有金额范围限制，这些 ProComponents 也给你封装好了：

支持网络请求

以表单中的 Select 组件为例，在中后台项目中一般有两种使用 Case：

静态下拉选项，在前端直接写死
动态下拉选项，从后端接口获取

如果是 case 1，直接使用 antd 的 Select 没问题，如果是 case 2，每次都要自己写请求，就很麻烦：

tsx 复制代码

import React, { useState, useEffect } from 'react';
import { Select } from 'antd';

const MyComponent = () => {
  const [options, setOptions] = useState([]);
  useEffect(() => {
    const result = await fetch('你的后端接口URL');
    setOptions(result);
  }, []);

  return (
    <Form.Item>
      <Select placeholder="请选择" options={options} />
    </Form.Item>
  );
};

但是在 ProComponents 中，只需要一行代码就搞定啦：

tsx 复制代码

 <ProFormSelect placeholder="请选择" request={fetch('你的后端接口URL')} />

你可能会说，不就是增加一个网络请求么，也没什么啊，但是人家节流防抖也都给你考虑进去了，你只需要专注于业务逻辑即可：

tsx 复制代码

<ProFormSelect.SearchSelect
  debounceTime={300}
  request={async ({ keyWords = '' }) => fetch('你的后端接口URL', { keyWords })}
  />

是不是很方便？像这种支持接口请求的封装已经被应用到很多基础的表单组件当中了。

动态表单列表

在一些复杂的场景下，需要创建下面这种动态表单列表，用户可以自行添加或删除表单项：

这就非常复杂了，如果自己写的话，要花费不少时间，没有几百行代码是绝对搞不定的，好在 ProComponents 为我们封装了 ProFormList 组件，增加、删除、数据绑定，全都给你做好了，业务代码非常简洁：

tsx 复制代码

<ProFormList>
  {(
    meta, // 当前行的基本信息 {name: number; key: number}
    index, // 当前的行号
    action, // 用于操作行的一些快捷方法
    count, // 总行数
  ) => {
    return (
      <ProFormSelect
        name="name"
        fieldProps={{ style: { minWidth: 100 } }}
        placeholder={t('scopeName.placeholder')}
        request={() => fetch('下拉列表')}
      />
      { /* 省略其他代码... */ }
    );
  }}
</ProFormList>

表单项联动

在表单当中，数据联动的场景非常普遍，写起来也非常复杂，例如下面展示一种基础的联动效果：当左侧选择「选择框」的时候，右侧是下拉菜单；当左侧选择「输入框」的时候，右侧是输入框：

这个需求看起来简单，但自己写的话还挺绕的，普通程序员很可能写出各种 bug 代码，好在 ProComponents 封装了 ProFormDependency 组件，写这种联动逻辑简直不要太简单！

tsx 复制代码

<ProFormDependency name={['useMode']}>
  {({ useMode }) => {
  if (useMode === 'select') {
    return (
      <ProFormSelect
        options={[
          {
            value: 'chapter',
            label: '盖章后生效',
          },
        ]}
        width="md"
        name="function"
        label="生效方式"
        />
    );
  }
  return (
    <ProFormText width="md" name="function" label="生效方式" />
  );
}}
</ProFormDependency>

你只需要配置当前表单项依赖哪个数据源，ProFormDependency 会自动处理 diff，并且从表单中提取相应的值！

好了，今天先介绍到这里，后续再为大家讲解表格和布局，欢迎大家点赞关注！