第三方库的使用
-
为了避免连在一起, 可以加一个空格
原生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 - antd@2.0之后不再支持IE8, antd@4.0之后不再支持IE9/10.
- 目前稳定的版本: v4.4.0
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
