上节课我们对比了一下BrowserRouter和HashRouter的区别，通常来说我们都是用BrowserRouter用得居多一些。这节课呢，我们来介绍一下关于antd的使用

回顾

在开始介绍antd之前，我们来对上节课的内容来做一个简单的回顾。

  • BrowserRouter与HashRouter的底层原理不同
  • BrowserRouter与HashRouter的url表现形式不同
  • BrowserRouter与HashRouter刷新后state参数影响不同
  • HashRouter可以用于解决一些路径错误相关的问题

以上便是上节课的主要内容，东西不多。接下来我们来开始这节课的内容。

UI库的使用

我们之前的案例一种用的都是bootstrap来写的，虽然说不上精美吧，但是也不至于说很丑。但是呢我们看一下我们之前案例的页面，我们是不是封装出了很多个组件啊？有我们的一般组件也有路由组件。但是有些组件比如我们的Header组件，里面就是一个大标题那么我们有没有什么工具就把这种大标题给我封装好的呢？里面的样式都是替我们设计好的，我们仅仅只需要修改一下内容就好了，这种工具如果存在的话可以给我们省很多事儿啊。

开源的React UI组件库

其实我们是有这种工具的，也就是我们所谓的UI组件库，目前市面上有很多前端框架的UI组件库。对于react来说，我们见得最多的是两个：

  • material-ui(国外)
  • ant-design(国内蚂蚁金服)

这两个库都很常用，在国内的话ant-design用的要更多一些，所以我们来介绍一下ant-design的使用，而ant-design有一个简称，那就是我们标题中说写的antd。

安装antd

我们打开antd的官网，可以看到里面的一些相关的介绍，antd这个组件库中整体主要是以蓝色色调为基础色调的。里面包含了很多替我们封装好的按钮或者输入框之类的组件，那么我们要想使用的话首先是不是得先安装我们的组件库？那么我们来到命令行执行npm i antd，我们看到我们安装的时候直接就写简称就可以了，根本不需要写ant-design。

基本使用

可能有人要问了，那么我们安装好之后应该怎么来使用UI组件库呢？这节课，我们先来介绍一些基本使用，下节课再介绍一些进阶的用法。这节课的基本使用呢其实很简单。或许大家一接触到一个陌生的三方库就会觉得害怕，这个东西之前我没见过，我们不会用，这个应该怎么用呢？

大家大可不用紧张。UI组件库的使用几乎和复制粘贴一样简单。我们先打开antd的官方网站：

image-20220118092316478

像这样，我们看最顶层是不是有一层导航栏？既然我们来讲基本使用的话就不用整那么多花活，点击组件导航项：

image-20220118092514176

我们可以看见这里有很多组件，像按钮啊，图标啊，或者布局类的分割线啊什么的那么我们使用原则是什么呢？比如说我们想要写个按钮，那么我们只需要点击了Button 按钮这个导航项，然后其他的什么都不用看，直接来看代码演示，看你想要什么样的按钮。

image-20220118093032956

像每种类型的按钮的展示框里面都会有下面这 5 个按钮，这 5 个按钮是干什么的呢？前三个是可以让你在一个在线的IDE里面来测试这些代码，第 4 个是复制代码，最后一个是查看代码，因为复制代码通常都是直接把上面所有按钮的代码都给复制了，所有我们通常都是点击最后一个来查看代码：

image-20220118093532763

我们来看一下，这里显示的代码分成了两块，第一块呢是三个按钮，然后换了个行，又是两个按钮，那么很明显这代码是和上面展示区对应的，第一块对应着上面三个按钮，第二块这是下面的两个按钮。那么比如说我们现在要写一个Primary Button这个类型的按钮，那么我们只需要把第一行的代码复制过来就可以了，但是我们要事先导入Button。 

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

export default class App extends Component {
  render() {
    return (
      <div>
        APP....
        <button>Click me</button>
        <Button type="primary">Click me</Button>
      </div>
    )
  }
}

我们来看一下代码，我们的App组件中写了一个原生的button然后又写了一个antd封装好的一个primary的Button组件，这两个一定要区分开，这里是一个组件而不是原生的按钮标签。那么我们来看一下效果吧：

image-20220118094540287

但是我们看起来这个玩意儿好像根本不起作用啊，和原生的几乎一模一样，是不是都觉得我们何必呢？我们明明原生的就可以，干嘛要用UI库呢？其实是什么原因呢，我们导入组件库，但是没有导入UI组件库的样式。所以我们要加上一段样式的引入:

import React, { Component } from 'react';
import { Button } from 'antd';
import "antd/dist/antd.css";

export default class App extends Component {
  render() {
    return (
      <div>
        APP....
        <button>Click me</button>
        <Button type="primary">Click me</Button>
      </div>
    )
  }
}

像这样，我们加入了UI组件库的样式的引入之后，我们再来看一下效果

image-20220118094944048

这一次我们的效果就明显了嘛。

但是呢我们回到代码中来看一下。这段代码是怎么写的呢？Button组件的开始标签，和结束标签，然后标签体内容，但是给组件传了一个props属性叫type。那么就是通过type来控制这个按钮的类型和样式呗。那么如果我们现在想要自定义怎么办呢？我传一个自己的type？那么antd肯定是不认的啊。

image-20220118095410399

没有关系，我们来看，其实每个组件的右侧最下面都会有一个选项叫API，这就是告诉我们这个组件中有哪些属性可以操作，并且我们可以通过属性来完成哪些操作。这是做高级操作的。

总结

以上便是antd的最基本的使用，我们不可能把所有的组件都说一遍，所以说我们就通过一个小例子来介绍一下用法，当然大家要用什么组件那就自己打开对应的组件来查看代码就好了。

  • ant-design是一个UI组件库，提供一些封装好的组件
  • antd的基本使用不需要大家去背或者死记，用得时候直接来查文档就行了
  • antd中的每一个组件都有相应的API文档，用于做一些偏高级一点的低定制化操作

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/use_ant_design/