Day12. AntDesign组件库

第三方库的使用

• 为了避免连在一起, 可以加一个空格

  
  
  原生React中添加class方法.png

Vue中添加class

• vue中添加class是一件非常简单的事情:

• 你可以通过传入一个对象:

  
  
  image.png

• 你也可以传入一个数组:

  
  
  image.png

• 甚至是对象和数组混合使用:

  
  
  image.png

React中添加class

• React在JSX给了我们开发者足够多的灵活性, 你可以像编写JavaScript代码一样, 通过一些逻辑来决定是否添加某些class:

  
  
  image.png
  
  
  image.png

AntDesign组件库

ANtDesign的介绍

• 简称antd, 是基于Ant Design设计体系的React UI组件库, 主要用于研发企业级中后台产品.
• • 中后台的产品属于工具性产品, 很多优秀的设计团队通过自身的探索和积累, 形成了自己的设计体系.

• AntDesign的特点:

  
  
  特点.png

• 全链路开发和设计工具体系. 全链路开发和设计指的是什么?

  
  
  全链路.png

AntDesign兼容性

• ANtDesign兼容性:
• • 现代浏览器和IE11(需要polyfills).
• 支持服务端渲染.

• Electron(VSCode基于此开发)

  
  
  支持.png
• [email protected]之后不再支持IE8, [email protected]之后不再支持IE9/10.
• 目前稳定的版本: v4.4.0

AntDesign的安装

AntDesign官网

image.png

• 使用npm或yarn安装
  npm install antd或yarn add antd

• 安装矢量图库yarn add @ant-design/icons

• antd把所有的样式打包到一个样式文件中, 内边距、背景颜色等, 需要导入这个文件import 'antd/dist/antd.css'
  

  位置.png

• 安装moment日期处理库 yarn add moment

• 导入import moment from 'moment';

• 属性越多, 可定制型越强

• 考虑一个问题: Antd是否会将一些没有用的代码(组件或逻辑代码)引入, 造成包很大? 不会的. 用到的才引入, 只会打包引入的代码.

• • 官网有提到: antd的JS代码默认支持基于ES modules的tree shaking, 对于js部分, 直接引入import { Button } from 'antd' 就会有按需加载的效果.

    
    
    tree shaking.png

认识craco

• 前面的使用过程是无法对主题进行配置的, 好像对主题等相关的高级特性进行配置, 需要修改create-react-app的默认配置.
• 如何修改create-react-app的默认配置呢?
• • 可以是通过yarn run eject来暴露出来对应的配置信息进行修改;
• • 但使对于webpack并不熟悉的人来说, 直接修改CRA的配置时会给你的项目带来负担, 甚至会增加项目的隐患和不稳定性.
• • 所以, 在项目开发中是不建议大家直接去修改CRA的配置信息的.

• 如何来进行修改默认配置? 目前社区有两个比较常见的方案:

  
  
  两个方案.png

Craco的使用步骤

craco使用步骤.png

• craco会多做一些事情, 读取根目录的craco.config.js文件

  
  
  改成craco启动.png

配置主题

配置主题.png

less文件.png

配置别名

配置别名.png

AntDesign评论列表的案例

案例效果.png

• 组件化开发的思想来做, 划分一下组件

  
  
  组件划分.png
• textarea默认宽度给的是100%
• 点击添加评论时, 获取文本里的内容, 传给App组件, 把评论数据放入List中

• 受控组件

  
  
  image.png
• 文本提示Tooltip, 双标签

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png