四、核心组件详解

4.1 按钮组件 Button
按钮是用户交互中最基础的组件，Ant Design提供了多种按钮类型：

import { Button, Space } from 'antd';

const ButtonDemo = () => (
  <Space>
    <Button type="primary">主要按钮</Button>
    <Button>默认按钮</Button>
    <Button type="dashed">虚线按钮</Button>
    <Button type="text">文本按钮</Button>
    <Button type="link">链接按钮</Button>
    <Button danger>危险按钮</Button>
  </Space>
);

按钮尺寸：

<Space>
  <Button size="large">大按钮</Button>
  <Button>默认按钮</Button>
  <Button size="small">小按钮</Button>
</Space>

按钮状态：

<Button loading>加载中</Button>
<Button disabled>禁用状态</Button>

4.2 栅格组件 Grid
Ant Design的栅格系统基于24列设计，通过Row和Col组件组合实现响应式布局：

import { Row, Col } from 'antd';

const GridDemo = () => (
  <Row gutter={[16, 24]}>  {/* gutter设置列间距 */}
    <Col xs={24} sm={12} md={8} lg={6} xl={4}>
      响应式列
    </Col>
    <Col xs={24} sm={12} md={8} lg={6} xl={4}>
      响应式列
    </Col>
  </Row>
);

栅格属性说明：

4.3 表单组件 Form
表单是企业级应用中最常用的组件之一，Ant Design提供了强大的表单解决方案：

import { Form, Input, Button, Select, Switch } from 'antd';

const FormDemo = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('表单数据:', values);
  };

  return (
    <Form
      form={form}
      name="basic"
      labelCol={
  { span: 6 }}
      wrapperCol={
  { span: 18 }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder="请输入用户名" />
      </Form.Item>

      <Form.Item
        label="邮箱"
        name="email"
        rules={[
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入有效的邮箱地址' }
        ]}
      >
        <Input placeholder="请输入邮箱" />
      </Form.Item>

      <Form.Item
        label="角色"
        name="role"
        initialValue="user"
      >
        <Select>
          <Select.Option value="admin">管理员</Select.Option>
          <Select.Option value="user">普通用户</Select.Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="启用"
        name="enabled"
        valuePropName="checked"
      >
        <Switch />
      </Form.Item>

      <Form.Item wrapperCol={
  { offset: 6, span: 18 }}>
        <Button type="primary" htmlType="submit">提交</Button>
        <Button htmlType="button" onClick={() => form.resetFields()}>重置</Button>
      </Form.Item>
    </Form>
  );
};

表单验证：Ant Design的表单组件采用Form.Item+控件的组合方式，提供了强大的数据收集、验证和状态管理能力。验证规则使用rules属性定义，支持required、type、min、max、pattern等多种内置规则。
4.4 表格组件 Table
Table是中后台系统中最常用的组件之一，支持排序、筛选、分页、展开行、树形数据等复杂功能：

import { Table, Tag, Space, Button } from 'antd';

const TableDemo = () => {
  const dataSource = [
    { key: '1', name: '张三', age: 32, address: '北京', tags: ['开发', '产品'] },
    { key: '2', name: '李四', age: 42, address: '上海', tags: ['设计'] },
    { key: '3', name: '王五', age: 28, address: '广州', tags: ['测试'] },
  ];

  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
    { title: '年龄', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age },
    { title: '地址', dataIndex: 'address', key: 'address', filters: [
      { text: '北京', value: '北京' },
      { text: '上海', value: '上海' },
    ], onFilter: (value, record) => record.address.indexOf(value) === 0 },
    { title: '标签', dataIndex: 'tags', key: 'tags', render: (tags) => (
      <>
        {tags?.map(tag => <Tag key={tag}>{tag}</Tag>)}
      </>
    ) },
    { title: '操作', key: 'action', render: (_, record) => (
      <Space>
        <Button type="link">编辑</Button>
        <Button type="link" danger>删除</Button>
      </Space>
    ) },
  ];

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      pagination={
  { pageSize: 10, showSizeChanger: true }}
      bordered
    />
  );
};

Table组件核心特性：

排序：通过sorter属性实现列排序

筛选：通过filters和onFilter实现数据筛选

分页：内置分页器，支持自定义每页条数
http://yvyus.cn/category/shengxiaopeidui.html
自定义渲染：通过render函数实现列内容的自定义展示

固定列：通过fixed属性固定左侧或右侧列

树形数据：通过children属性支持树形数据展示

4.5 数据录入组件
Ant Design提供了完整的数据录入组件体系：

import { Input, Select, DatePicker, Radio, Checkbox, Switch, Slider } from 'antd';

const { TextArea, Search } = Input;
const { RangePicker } = DatePicker;

const FormInputDemo = () => (
  <>
    <Input placeholder="基础输入框" />
    <Input.Password placeholder="密码输入框" />
    <TextArea rows={4} placeholder="多行文本框" />
    <Search placeholder="搜索框" onSearch={value => console.log(value)} />

    <Select placeholder="下拉选择" style={
  { width: 200 }}>
      <Select.Option value="option1">选项1</Select.Option>
      <Select.Option value="option2">选项2</Select.Option>
    </Select>

    <DatePicker placeholder="日期选择" />
    <RangePicker placeholder={['开始日期', '结束日期']} />

    <Radio.Group>
      <Radio value="a">选项A</Radio>
      <Radio value="b">选项B</Radio>
    </Radio.Group>

    <Checkbox.Group>
      <Checkbox value="apple">苹果</Checkbox>
      <Checkbox value="banana">香蕉</Checkbox>
    </Checkbox.Group>

    <Switch />
    <Slider defaultValue={30} />
  </>
);

4.6 数据展示组件

import { Card, Badge, Avatar, Tag, Progress, Collapse, Tabs } from 'antd';

const { Panel } = Collapse;

const DataDisplayDemo = () => (
  <>
    <Card title="卡片标题" extra={<a href="#">更多</a>} style={
  { width: 300 }}>
      <p>卡片内容</p>
    </Card>

    <Badge count={5}>
      <Avatar shape="square" size="large" />
    </Badge>

    <Tag color="blue">标签</Tag>
    <Tag color="success">成功</Tag>
    <Tag color="error">错误</Tag>

    <Progress percent={60} status="active" />

    <Collapse>
      <Panel header="面板1" key="1">
        <p>面板内容</p>
      </Panel>
    </Collapse>

    <Tabs defaultActiveKey="1">
      <Tabs.TabPane tab="标签1" key="1">内容1</Tabs.TabPane>
      <Tabs.TabPane tab="标签2" key="2">内容2</Tabs.TabPane>
    </Tabs>
  </>
);

4.7 反馈组件

import { Modal, message, notification, Popconfirm, Spin } from 'antd';

const FeedbackDemo = () => {
  const showModal = () => {
    Modal.confirm({
      title: '确认操作',
      content: '确定要执行此操作吗？',
      onOk: () => message.success('操作成功'),
    });
  };

  const showNotification = () => {
    notification.success({
      message: '操作成功',
      description: '您的操作已成功完成',
    });
  };

  return (
    <>
      <Button onClick={showModal}>确认弹窗</Button>
      <Button onClick={() => message.success('成功消息')}>消息提示</Button>
      <Button onClick={showNotification}>通知提醒</Button>

      <Popconfirm title="确定删除吗？" onConfirm={() => message.info('已删除')}>
        <Button danger>删除</Button>
      </Popconfirm>

      <Spin tip="加载中...">
        <div>内容区域</div>
      </Spin>
    </>
  );
};

五、Ant Design Pro

Ant Design Pro是基于Ant Design组件库构建的企业级中后台前端解决方案，内置了丰富的页面模板和高阶组件。

5.1 ProTable高级表格
ProTable是基于Table封装的增强表格组件，支持高级搜索、表格内编辑、数据缓存、自定义列等功能：

import { ProTable } from '@ant-design/pro-components';

const ProTableDemo = () => {
  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age', valueType: 'digit' },
    { title: '邮箱', dataIndex: 'email', key: 'email', valueType: 'text' },
  ];

  const request = async (params) => {
    // 发起请求获取数据
    const res = await fetch(`/api/users?page=${params.current}&size=${params.pageSize}`);
    const data = await res.json();
    return { data: data.list, success: true, total: data.total };
  };

  return (
    <ProTable
      columns={columns}
      request={request}
      rowKey="id"
      search={
  { labelWidth: 'auto' }}
      pagination={
  { pageSize: 10 }}
      toolBarRender={() => [<Button type="primary">新建</Button>]}
    />
  );
};

5.2 ProForm高级表单
ProForm提供了更多表单布局、校验规则和联动逻辑，支持分步表单、弹窗表单等场景：

import { ProForm, ProFormText, ProFormSelect, ProFormDatePicker } from '@ant-design/pro-components';

const ProFormDemo = () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log(values);
      }}
      submitter={
  {
        searchConfig: { submitText: '提交' },
      }}
    >
      <ProFormText
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        rules={[{ required: true, message: '请输入姓名' }]}
      />
      <ProFormSelect
        name="gender"
        label="性别"
        options={[
          { label: '男', value: 'male' },
          { label: '女', value: 'female' },
        ]}
      />
      <ProFormDatePicker name="birthday" label="生日" />
    </ProForm>
  );
};

5.3 ProLayout布局组件
ProLayout针对中后台优化的布局组件，集成了侧边栏导航、面包屑、用户信息等常见元素：

import { ProLayout } from '@ant-design/pro-components';

const ProLayoutDemo = () => {
  return (
    <ProLayout
      title="Ant Design Pro"
      logo="https://ant.design/logo.svg"
      menuItemRender={(item, dom) => <a href={item.path}>{dom}</a>}
      menuDataRender={() => [
        { path: '/dashboard', name: '仪表盘', icon: 'dashboard' },
        { path: '/user', name: '用户管理', icon: 'user' },
      ]}
    >
      {/* 页面内容 */}
    </ProLayout>
  );
};

六、性能优化

6.1 按需加载
Ant Design 5.0本身支持Tree Shaking，组件和样式都可以按需引入。但为了进一步优化，可以配合路由懒加载：

import { lazy, Suspense } from 'react';

const UserList = lazy(() => import('./pages/UserList'));
const OrderList = lazy(() => import('./pages/OrderList'));

const App = () => (
  <Suspense fallback={<Spin />}>
    <Routes>
      <Route path="/users" element={<UserList />} />
      <Route path="/orders" element={<OrderList />} />
    </Routes>
  </Suspense>
);

6.2 大表格优化
对于超大数据量场景，可以使用虚拟滚动技术：

import { Table } from 'antd';

<Table
  dataSource={largeData}
  columns={columns}
  scroll={
  { y: 400, x: 1500 }}
  pagination={false}
  virtual
/>

6.3 组件懒加载
对于非首屏组件，可以使用动态导入：

import { lazy } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

const Dashboard = () => (
  <Suspense fallback={<Spin />}>
    <HeavyChart />
  </Suspense>
);

七、最佳实践

7.1 设计规范一致性
使用Ant Design的最大优势之一是可以快速建立统一的视觉体系。建议遵循原有设计规范，不要随意修改组件样式，尤其是颜色、间距、字体等核心参数。

7.2 国际化支持
Ant Design内置了多语言支持：

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';

<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

7.3 按需定制主题
推荐使用ConfigProvider的theme属性进行主题定制，而不是直接覆盖CSS变量。这种方式更易于维护和升级。

7.4 使用TypeScript
Ant Design深度集成TypeScript，强烈建议在项目中使用TypeScript以获得完整的类型提示和校验。
来源：
http://yvyus.cn/