ant design react（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，构建用户界面（UI）时，开发者常常需要在功能性和美观性之间找到平衡。Ant Design React 作为阿里巴巴团队开源的 React 组件库，凭借其高度可定制的组件、完善的文档和庞大的社区支持，成为许多企业级应用的首选工具。无论是编程初学者还是经验丰富的开发者，都能通过 Ant Design React 快速搭建高质量的交互界面。本文将从基础概念到实战案例，系统性地解析如何高效利用这一工具，帮助读者逐步掌握其核心能力。

什么是 Ant Design React？

Ant Design React 是 Ant Design 设计体系在 React 框架中的实现版本。它提供了超过 100 个经过精心设计的 UI 组件，覆盖了从按钮、表单到复杂的数据展示组件（如表格、图表）的全场景需求。其核心优势在于：

1. 一致性：所有组件遵循统一的设计规范，确保应用界面风格统一。
2. 灵活性：支持通过 CSS-in-JS 或自定义主题快速调整样式。
3. 易用性：组件 API 设计简洁，文档示例丰富，适合快速上手。
4. 社区支持：拥有活跃的开发者社区和持续更新的版本迭代。

快速上手：安装与基础组件使用

安装步骤

通过 npm 或 yarn 安装 Ant Design React 及其依赖：

npm install antd react react-dom  
yarn add antd react react-dom  

引入组件

在 React 项目中，可通过按需引入或全局引入的方式使用组件。推荐使用按需引入以减少打包体积：

// 按需引入（需配置babel-plugin-import插件）  
import { Button, Input } from 'antd';  

// 全局引入（开发环境建议）  
import 'antd/dist/antd.css';  
import * as Antd from 'antd';  

基础组件示例：按钮与输入框

import React from 'react';  
import { Button, Input } from 'antd';  

function BasicExample() {  
  return (  
    <div>  
      <Button type="primary">点击我</Button>  
      <Input placeholder="请输入内容" style={{ width: 200 }} />  
    </div>  
  );  
}  

效果说明：

• Button 组件通过 type 属性控制样式（如 primary、dashed、danger）。
• Input 组件支持 placeholder、value、onChange 等常见属性。

常用组件分类与实战

1. 布局组件：构建页面骨架

Ant Design React 的布局组件（如 Layout、Row、Col）采用栅格系统，帮助开发者快速实现响应式设计。

示例：基础布局

import { Layout, Menu } from 'antd';  
const { Header, Content, Footer } = Layout;  

function AppLayout() {  
  return (  
    <Layout>  
      <Header style={{ background: '#fff', padding: 0 }}>  
        <Menu mode="horizontal" />  
      </Header>  
      <Content>主内容区域</Content>  
      <Footer>© 2023 My Company</Footer>  
    </Layout>  
  );  
}  

2. 表单组件：交互与验证

表单组件（Form）支持复杂验证逻辑和数据绑定，适合需要用户输入的场景。

示例：带验证的登录表单

import { Form, Input, Button } from 'antd';  
import { Rule } from 'rc-field-form';  

const LoginForm = () => {  
  const validateEmail = (_: Rule, value: string) => {  
    if (!value.includes('@')) {  
      return Promise.reject('请输入有效的邮箱地址');  
    }  
    return Promise.resolve();  
  };  

  return (  
    <Form onFinish={values => console.log(values)}>  
      <Form.Item  
        name="email"  
        rules={[{ required: true }, { validator: validateEmail }]}  
      >  
        <Input placeholder="邮箱" />  
      </Form.Item>  
      <Form.Item name="password" rules={[{ required: true }]}>  
        <Input.Password placeholder="密码" />  
      </Form.Item>  
      <Form.Item>  
        <Button type="primary" htmlType="submit">  
          登录  
        </Button>  
      </Form.Item>  
    </Form>  
  );  
};  

3. 数据展示组件：表格与分页

Table 组件支持分页、排序、筛选等高级功能，适合展示复杂数据。

示例：带分页的表格

import { Table, Pagination } from 'antd';  

interface DataType {  
  key: string;  
  name: string;  
  age: number;  
  address: string;  
}  

const data: DataType[] = [  
  { key: '1', name: 'John', age: 32, address: 'New York' },  
  // 其他数据...  
];  

function DataGrid() {  
  const [currentPage, setCurrentPage] = useState(1);  
  const pageSize = 5;  

  return (  
    <div>  
      <Table  
        columns={[  
          { title: '姓名', dataIndex: 'name' },  
          { title: '年龄', dataIndex: 'age' },  
        ]}  
        dataSource={data.slice((currentPage - 1) * pageSize, currentPage * pageSize)}  
      />  
      <Pagination  
        current={currentPage}  
        pageSize={pageSize}  
        total={data.length}  
        onChange={(page) => setCurrentPage(page)}  
      />  
    </div>  
  );  
}  

高级功能：主题定制与国际化

1. 主题定制：打造专属视觉风格

通过 Less 变量覆盖或自定义主题文件，开发者可快速调整 Ant Design React 的配色和组件样式。

示例：修改按钮主色

@primary-color: #1890ff; // 默认蓝色  
@button-primary-bg: @primary-color;  

// 在项目入口文件中引入自定义样式  
import './custom.less';  

2. 国际化支持：多语言切换

通过 ConfigProvider 组件和语言包，可轻松实现多语言界面。

示例：切换中英文

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

function App() {  
  const [locale, setLocale] = useState(zhCN);  

  return (  
    <ConfigProvider locale={locale}>  
      <button onClick={() => setLocale(enUS)}>English</button>  
      <button onClick={() => setLocale(zhCN)}>中文</button>  
      {/* 其他组件 */}  
    </ConfigProvider>  
  );  
}  

性能优化：懒加载与代码分割

懒加载组件

使用 React.lazy 和 Suspense 实现按需加载，减少初始加载时间。

示例：懒加载 Modal 组件

const LazyModal = React.lazy(() => import('antd/es/modal'));  

function App() {  
  return (  
    <div>  
      <button onClick={() => <LazyModal>...</LazyModal>}>  
        弹出模态框  
      </button>  
      <React.Suspense fallback="加载中...">  
        <LazyModal />  
      </React.Suspense>  
    </div>  
  );  
}  

代码分割与 Webpack 配置

通过 Webpack 的 SplitChunksPlugin 将 Ant Design 的样式与业务代码分离：

// webpack.config.js  
module.exports = {  
  optimization: {  
    splitChunks: {  
      chunks: 'all',  
      cacheGroups: {  
        antd: {  
          test: /[\\/]node_modules[\\/]antd[\\/]/,  
          name: 'vendor-antd',  
          chunks: 'all',  
        },  
      },  
    },  
  },  
};  

实战案例：电商商品列表页

需求描述

构建一个包含商品卡片、筛选栏和分页的电商商品列表页，要求：

1. 商品卡片展示图片、标题和价格。
2. 筛选栏支持按价格区间和分类筛选。
3. 分页支持跳转和动态加载数据。

实现步骤

1. 商品卡片组件

import { Card } from 'antd';  

interface ProductProps {  
  title: string;  
  price: number;  
  imageUrl: string;  
}  

const ProductCard = ({ title, price, imageUrl }: ProductProps) => {  
  return (  
    <Card hoverable style={{ width: 240 }}>  
      <img alt="example" src={imageUrl} style={{ height: 160 }} />  
      <div>  
        <h3>{title}</h3>  
        <p>价格：${price}</p>  
      </div>  
    </Card>  
  );  
};  

2. 筛选栏与分页

import { Select, InputNumber } from 'antd';  
const { Option } = Select;  

function ProductList({ products }) {  
  const [filter, setFilter] = useState({ category: '', priceRange: [0, 1000] });  

  const handleCategoryChange = (value) => {  
    setFilter({ ...filter, category: value });  
  };  

  const handlePriceChange = (value) => {  
    setFilter({ ...filter, priceRange: value });  
  };  

  return (  
    <div>  
      <div style={{ marginBottom: 20 }}>  
        <Select value={filter.category} onChange={handleCategoryChange}>  
          <Option value="">全部分类</Option>  
          <Option value="electronics">电子产品</Option>  
        </Select>  
        <InputNumber  
          value={filter.priceRange[0]}  
          onChange={(v) => { ... }}  
          style={{ marginLeft: 10 }}  
        />  
        -  
        <InputNumber value={filter.priceRange[1]} />  
      </div>  

      <div style={{ display: 'flex', flexWrap: 'wrap' }}>  
        {products  
          .filter(product => {  
            // 过滤逻辑...  
          })  
          .map(product => (  
            <ProductCard key={product.id} {...product} />  
          ))}  
      </div>  

      <Pagination total={100} pageSize={12} />  
    </div>  
  );  
}  

结论

Ant Design React 凭借其全面的功能覆盖、良好的生态支持和持续的社区迭代，已成为现代前端开发中不可或缺的工具。无论是快速搭建 MVP 还是构建复杂的企业级应用，开发者都能通过其组件库和配套工具提升开发效率。对于初学者而言，从基础组件入手，逐步探索主题定制和性能优化，是掌握这一框架的有效路径。随着项目经验的积累，开发者还能通过 Ant Design 的源码学习，深入理解大型组件库的设计模式，进一步提升自己的技术视野。

下一步建议：

• 阅读官方文档，探索更多组件和配置选项。
• 参与社区案例分享，获取实战灵感。
• 结合项目需求，尝试自定义组件或扩展 Ant Design 的功能。

通过本文的讲解，希望读者能够对 Ant Design React 的核心概念和应用场景有清晰的认识，并在实际开发中灵活运用其能力。