Ant Design 是什么
AntDesign(簡(jiǎn)稱Antd): 是螞蟻金服開發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。
- Antd提供一套開箱即用的高質(zhì)量 React 組件
- Antd擁有完整的一套設(shè)計(jì)規(guī)范
直接看Antd官方文檔
React是什么
React是Facebook開源的一個(gè)前端框架开财，官方Slogen是“一次學(xué)習(xí)船响，隨處編寫”⊙阒伲現(xiàn)在在阿里昔字、騰訊高每、知乎和眾多新興項(xiàng)目银觅、新興公司中被廣泛應(yīng)用礼饱，也是Github現(xiàn)階段Start最多的前端框架，
其特點(diǎn)是：
- 組件化
- 在React中究驴，頁(yè)面中所有元素都由組件組成
- 組件復(fù)用提高效率
- 項(xiàng)目如果規(guī)劃有度镊绪，會(huì)逐步形成自己的組件庫(kù)，前端項(xiàng)目開發(fā)會(huì)越來(lái)越快
- 虛擬DOM
- 虛擬DOM就是由JS對(duì)象模擬DOM樹洒忧，每次頁(yè)面中需要更新DOM的時(shí)候蝴韭，JS在循環(huán)生命周期中統(tǒng)一對(duì)比當(dāng)前和歷史狀態(tài)的DOM樹差異一并更新差異到真正的DOM上。
- 優(yōu)勢(shì)1: 直接操作修改DOM雖然更快熙侍，但是如果頻繁操作DOM就沒(méi)有這種統(tǒng)一對(duì)比操作修改的性能高
- 優(yōu)勢(shì)2: 由于JS代碼操作的是虛擬的DOM榄鉴，所以只要在其他平臺(tái)把圖層對(duì)虛擬DOM進(jìn)行映射就可以達(dá)到跨平臺(tái)的目的，而前端的開發(fā)方式不需要改變蛉抓，這個(gè)思路的衍生品是ReactNative庆尘、微信小程序、阿里Weex巷送。
- 優(yōu)勢(shì)3: 純JS開發(fā)界面會(huì)獲得更高的自由度驶忌，這也是AntDesign誕生的原由。
- 單頁(yè)Web應(yīng)用（Single Page Web Application惩系，SPA）
- 由于是虛擬DOM位岔，整個(gè)項(xiàng)目絕大部分代碼是JS，所以很自然的就是一個(gè)SPA應(yīng)用堡牡，SPA有利有弊抒抬，但是當(dāng)SPA應(yīng)用使用了ReactRouter，就擁有了多頁(yè)應(yīng)用的絕大部分特性(甚至有過(guò)之)晤柄。SPA的缺點(diǎn)在文后會(huì)有提及擦剑。
- 單頁(yè)應(yīng)用項(xiàng)目中切換頁(yè)面不需要訪問(wèn)服務(wù)器，切換速度迅捷。
- JSX
- JSX是Javascript中嵌入了XML代碼惠勒，編寫過(guò)程中與JS無(wú)異赚抡，JSX只是為了讓純JS創(chuàng)建DOM元素變得更加便捷，Babel會(huì)把其中的XML代碼轉(zhuǎn)化為純JS代碼纠屋，所以不會(huì)有兼容性問(wèn)題, 下面是一段JSX代碼涂臣，使用的JS版本是ES6:
let React = require('react')
class Comp extends React.PureComponent {
constructor(props) {
super(props)
}
render() {
return (
<div className='button' style={{width:100, height:100}} >
我是一個(gè)div標(biāo)簽
</div>
)
}
}
module.exports = Comp
小貼士：
- React只是一個(gè)項(xiàng)目的視圖層，如果要編寫大型項(xiàng)目需要配合ReactRouter售担、Redux(或Mobx)
- React生態(tài)非沉抟牛活躍，有眾多第三方組件族铆，Antd只是其中之一岩四。
- React可以和絕大部分第三方JS、CSS配合使用哥攘，例如Bootstrap剖煌、Jquery、Anmina.js等等
- 不要直接使用Jquery或者document.getElementById去操作已被渲染的DOM
- React的Slogen是“一次學(xué)習(xí)逝淹，隨處編寫”耕姊。會(huì)了React之后簡(jiǎn)單學(xué)習(xí)一下衍生項(xiàng)目就可以開發(fā)其他平臺(tái)的原生應(yīng)用，如ReactNative開發(fā)iOS應(yīng)用创橄、Android應(yīng)用箩做；Electron+React開發(fā)Window莽红、Mac桌面應(yīng)用妥畏。
直接看React官方文檔
React全家桶
項(xiàng)目中會(huì)用到的第三方包
- create-react-app 官方腳手架
- Facebook官方的腳手架，零配置搭建基于webpack的React開發(fā)環(huán)境
- 集成了Webpack安吁、babel(把高版本JS代碼編譯成低版本的JS代碼)醉蚁、flexbugs-fixes(低版本Flex兼容編譯)、WebLiveReload(開發(fā)時(shí)鬼店，啟動(dòng)一個(gè)Nodejs服務(wù)器网棍，實(shí)時(shí)監(jiān)聽代碼刷新頁(yè)面)、并且打包時(shí)給JS妇智、CSS文件名都添加了隨機(jī)的字符滥玷，以解決版本更新時(shí)JS緩存的問(wèn)題。
- Redux 單向數(shù)據(jù)流巍棱，狀態(tài)管理
- 單向數(shù)據(jù)流可以很好的管理整個(gè)項(xiàng)目的狀態(tài)
- 單純的Redux只有2KB
- ReactRouter 單頁(yè)應(yīng)用路由
- 使用了Router惑畴，單頁(yè)應(yīng)用也可以和多頁(yè)應(yīng)用一樣，每個(gè)頁(yè)面航徙、狀態(tài)都有自己的路由地址
- Antd 螞蟻金服UI組件
- ReactMotion 動(dòng)畫框架
- 高性能彈性動(dòng)畫
白璧微瑕
缺點(diǎn)及應(yīng)對(duì)措施
- SPA導(dǎo)致于內(nèi)容頁(yè)無(wú)法SEO如贷，百度的搜索引擎在搜索到某個(gè)頁(yè)面時(shí)，只會(huì)檢索HTML文件中的字符，而SPA頁(yè)面只有少數(shù)HTML文件杠袱，DOM樹是由JS運(yùn)行后生成尚猿，不會(huì)被搜索引擎檢索到。
- 需要SEO的頁(yè)面需單獨(dú)編寫
- 若項(xiàng)目對(duì)大部分頁(yè)面都有SEO要求楣富，可使用服務(wù)端渲染可以解決所有頁(yè)面的SEO(開發(fā)成本會(huì)大幅度上升)
- 首頁(yè)加載時(shí)間較長(zhǎng)
React(131KB)+ReactRouter(50KB)+AntdCSS(380KB)+項(xiàng)目JS代碼(100-300KB) = 800KB- 服務(wù)端必須開啟gzip凿掂，可以將以上代碼壓縮至250KB，基本解決首頁(yè)加載問(wèn)題
- 在首屏用不到的第三方包需要使用懶加載纹蝴。懶加載不會(huì)增加首屏加載時(shí)間
- Antd整個(gè)JS項(xiàng)目有1.25MB缠劝，按需加載Antd組件, 可大幅度降低Antd的JS代碼，例如只使用一個(gè)Button編譯后50KB
- 從其他地方節(jié)約出這些JS代碼的體積骗灶，例如所有圖片都要進(jìn)行無(wú)損壓縮處理
- 前期開發(fā)成本上升
- 需要學(xué)習(xí)新的開發(fā)方式惨恭、組件化開發(fā)思路
- 需要初略了解NodeJS開發(fā)環(huán)境
- React全家桶的學(xué)習(xí)成本較高
文尾：全副武裝，才能在需求面前存活
相關(guān)文檔
- React https://doc.react-china.org/
- Antd https://ant.design/docs/react/introduce-cn
- Redux http://www.redux.org.cn/
- React-Router https://reacttraining.com/
