第三方庫的使用
-
為了避免連在一起, 可以加一個(gè)空格
原生React中添加class方法.png
Vue中添加class
- vue中添加class是一件非常簡單的事情:
-
你可以通過傳入一個(gè)對(duì)象:
image.png -
你也可以傳入一個(gè)數(shù)組:
image.png -
甚至是對(duì)象和數(shù)組混合使用:
image.png
React中添加class
-
React在JSX給了我們開發(fā)者足夠多的靈活性, 你可以像編寫JavaScript代碼一樣, 通過一些邏輯來決定是否添加某些class:
image.png
image.png
AntDesign組件庫
ANtDesign的介紹
- 簡稱antd, 是基于Ant Design設(shè)計(jì)體系的React UI組件庫, 主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品.
- 中后臺(tái)的產(chǎn)品屬于工具性產(chǎn)品, 很多優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)通過自身的探索和積累, 形成了自己的設(shè)計(jì)體系.
-
AntDesign的特點(diǎn):
特點(diǎn).png -
全鏈路開發(fā)和設(shè)計(jì)工具體系. 全鏈路開發(fā)和設(shè)計(jì)指的是什么?
全鏈路.png
AntDesign兼容性
- ANtDesign兼容性:
- 現(xiàn)代瀏覽器和IE11(需要polyfills).
- 支持服務(wù)端渲染.
-
Electron(VSCode基于此開發(fā))
支持.png - antd@2.0之后不再支持IE8, antd@4.0之后不再支持IE9/10.
- 目前穩(wěn)定的版本: v4.4.0
AntDesign的安裝
使用npm或yarn安裝
npm install antd或yarn add antd安裝矢量圖庫
yarn add @ant-design/icons-
antd把所有的樣式打包到一個(gè)樣式文件中, 內(nèi)邊距畏浆、背景顏色等, 需要導(dǎo)入這個(gè)文件
import 'antd/dist/antd.css'
位置.png 安裝moment日期處理庫
yarn add moment導(dǎo)入
import moment from 'moment';屬性越多, 可定制型越強(qiáng)
考慮一個(gè)問題: Antd是否會(huì)將一些沒有用的代碼(組件或邏輯代碼)引入, 造成包很大? 不會(huì)的. 用到的才引入, 只會(huì)打包引入的代碼.
-
官網(wǎng)有提到: antd的JS代碼默認(rèn)支持基于ES modules的tree shaking, 對(duì)于js部分, 直接引入import { Button } from 'antd' 就會(huì)有按需加載的效果.
tree shaking.png
-
認(rèn)識(shí)craco
- 前面的使用過程是無法對(duì)主題進(jìn)行配置的, 好像對(duì)主題等相關(guān)的高級(jí)特性進(jìn)行配置, 需要修改create-react-app的默認(rèn)配置.
- 如何修改create-react-app的默認(rèn)配置呢?
- 可以是通過
yarn run eject來暴露出來對(duì)應(yīng)的配置信息進(jìn)行修改;
- 可以是通過
- 但使對(duì)于webpack并不熟悉的人來說, 直接修改CRA的配置時(shí)會(huì)給你的項(xiàng)目帶來負(fù)擔(dān), 甚至?xí)黾禹?xiàng)目的隱患和不穩(wěn)定性.
- 所以, 在項(xiàng)目開發(fā)中是不建議大家直接去修改CRA的配置信息的.
-
如何來進(jìn)行修改默認(rèn)配置? 目前社區(qū)有兩個(gè)比較常見的方案:
兩個(gè)方案.png
Craco的使用步驟
-
craco會(huì)多做一些事情, 讀取根目錄的craco.config.js文件
改成craco啟動(dòng).png
配置主題
配置別名
AntDesign評(píng)論列表的案例
-
組件化開發(fā)的思想來做, 劃分一下組件
組件劃分.png - textarea默認(rèn)寬度給的是100%
- 點(diǎn)擊添加評(píng)論時(shí), 獲取文本里的內(nèi)容, 傳給App組件, 把評(píng)論數(shù)據(jù)放入List中
-
受控組件
image.png - 文本提示Tooltip, 雙標(biāo)簽
coderwhy的React核心技術(shù)與開發(fā)實(shí)戰(zhàn)課程鏈接
