Ant Design（Antd）了解

Ant Design（Antd）是什么？React 开发必备组件库

一句话理解：Ant Design 是一个基于 React 的 UI 组件库，帮你把按钮、表单、表格、弹窗等常用页面功能提前封装好了。

你不需要每次都从 HTML + CSS + JavaScript 开始写页面。

一、举个最简单的例子

假设要开发一个“新增任务”按钮。

原生 HTML：

<button class="btn">新增任务</button>

.btn {
  background: #1677ff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

使用 Ant Design：

import { Button } from "antd";

function App() {
  return (
    <Button type="primary">
      新增任务
    </Button>
  );
}

不需要自己实现按钮的基础样式、禁用状态等，直接使用封装好的组件。

二、Ant Design 长什么样？

中后台管理系统的典型界面示意，非 Ant Design 组件的实际运行截图。

三、最常用的 Ant Design 组件

组件	作用	重要程度
Button	按钮	P0
Input	输入框	P0
Select	下拉选择器	P0
Table	数据表格	P0
Form	表单及校验	P0
Modal	弹窗	P0
message	消息提示	P0
DatePicker	日期选择	P1
Tabs	标签页	P1
Drawer	抽屉面板	P1
Pagination	分页	P1
Upload	文件上传	P1

四、Ant Design 怎么使用？

首先，在已有的 React 项目中安装：

npm install antd

然后导入组件：

import { Button, Input, Space } from "antd";

function App() {
  return (
    <Space>
      <Input placeholder="请输入任务名称" />
      <Button type="primary">提交</Button>
    </Space>
  );
}

export default App;

这段代码涉及三个核心知识点：

• import：ES Module 语法，从 antd 包导入组件。
• <Button />：React 组件，本质上是一个封装好的 UI 组件。
• type="primary"：组件的 Props，控制按钮样式。

Ant Design 提供完整的 TypeScript 类型定义，可以直接配合 React + TypeScript 使用。

Ant Design+1

五、Ant Design 和 React 是什么关系？

这是需要理解的重点。

技术	负责什么
HTML	网页结构
CSS	页面样式、布局
JavaScript	逻辑、事件、异步请求
React	组件、状态管理、页面渲染
Ant Design	提供封装好的 UI 组件

React 是开发 UI 的基础库，Ant Design 是建立在 React 之上的组件库。

Ant Design 不能替代 React，你仍然需要使用 useState、Props、事件处理和 API 请求等知识。

六、你应该怎么学习？

结合你目前要快速上手 React 中后台开发的目标，建议：

1. 先掌握 React useState、Props、事件和 JSX。
2. 学习 Ant Design 的 Button、Input、Select。
3. 重点学习 Form 表单以及 Table 表格。
4. 再学习 Modal、message、Tabs 等业务常用组件。

其中最值得花时间的是 Form + Table。 因为中后台系统大量页面都是搜索筛选、表格展示、新增编辑、弹窗提交这一套流程。

官方资料：Ant Design 组件总览 · Ant Design 快速开始

如果你想快速上手，下一步最适合直接学习一个完整实例：React + Ant Design 实现任务管理页面（查询表单 + Table 表格 + 新增 Modal 弹窗）。这个例子可以把 React、TypeScript 和 Ant Design 的核心用法一次串起来。