Ant Design 是什么
AntDesign(簡(jiǎn)稱(chēng)Antd): 是螞蟻金服開(kāi)發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。
- Antd提供一套開(kāi)箱即用的高質(zhì)量 React 組件
- Antd擁有完整的一套設(shè)計(jì)規(guī)范
直接看Antd官方文檔
React是什么
React是Facebook開(kāi)源的一個(gè)前端框架，官方Slogen是“一次學(xué)習(xí)，隨處編寫(xiě)”。現(xiàn)在在阿里、騰訊、知乎和眾多新興項(xiàng)目、新興公司中被廣泛應(yīng)用，也是Github現(xiàn)階段Start最多的前端框架，
其特點(diǎn)是：
- 組件化
- 在React中，頁(yè)面中所有元素都由組件組成
- 組件復(fù)用提高效率
- 項(xiàng)目如果規(guī)劃有度，會(huì)逐步形成自己的組件庫(kù)，前端項(xiàng)目開(kāi)發(fā)會(huì)越來(lái)越快
- 虛擬DOM
- 虛擬DOM就是由JS對(duì)象模擬DOM樹(shù)，每次頁(yè)面中需要更新DOM的時(shí)候，JS在循環(huán)生命周期中統(tǒng)一對(duì)比當(dāng)前和歷史狀態(tài)的DOM樹(shù)差異一并更新差異到真正的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)的目的，而前端的開(kāi)發(fā)方式不需要改變，這個(gè)思路的衍生品是ReactNative、微信小程序、阿里Weex。
- 優(yōu)勢(shì)3: 純JS開(kāi)發(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代碼，編寫(xiě)過(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ě)大型項(xiàng)目需要配合ReactRouter、Redux(或Mobx)
- React生態(tài)非常活躍，有眾多第三方組件，Antd只是其中之一。
- React可以和絕大部分第三方JS、CSS配合使用，例如Bootstrap、Jquery、Anmina.js等等
- 不要直接使用Jquery或者document.getElementById去操作已被渲染的DOM
- React的Slogen是“一次學(xué)習(xí)，隨處編寫(xiě)”。會(huì)了React之后簡(jiǎn)單學(xué)習(xí)一下衍生項(xiàng)目就可以開(kāi)發(fā)其他平臺(tái)的原生應(yīng)用，如ReactNative開(kāi)發(fā)iOS應(yīng)用、Android應(yīng)用；Electron+React開(kāi)發(fā)Window、Mac桌面應(yīng)用。
直接看React官方文檔
React全家桶
項(xiàng)目中會(huì)用到的第三方包
- create-react-app 官方腳手架
- Facebook官方的腳手架，零配置搭建基于webpack的React開(kāi)發(fā)環(huán)境
- 集成了Webpack、babel(把高版本JS代碼編譯成低版本的JS代碼)、flexbugs-fixes(低版本Flex兼容編譯)、WebLiveReload(開(kāi)發(fā)時(shí)，啟動(dòng)一個(gè)Nodejs服務(wù)器，實(shí)時(shí)監(jiān)聽(tīng)代碼刷新頁(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)畫(huà)框架
- 高性能彈性動(dòng)畫(huà)
白璧微瑕
缺點(diǎn)及應(yīng)對(duì)措施
- SPA導(dǎo)致于內(nèi)容頁(yè)無(wú)法SEO，百度的搜索引擎在搜索到某個(gè)頁(yè)面時(shí)，只會(huì)檢索HTML文件中的字符，而SPA頁(yè)面只有少數(shù)HTML文件，DOM樹(shù)是由JS運(yùn)行后生成，不會(huì)被搜索引擎檢索到。
- 需要SEO的頁(yè)面需單獨(dú)編寫(xiě)
- 若項(xiàng)目對(duì)大部分頁(yè)面都有SEO要求，可使用服務(wù)端渲染可以解決所有頁(yè)面的SEO(開(kāi)發(fā)成本會(huì)大幅度上升)
- 首頁(yè)加載時(shí)間較長(zhǎng)
React(131KB)+ReactRouter(50KB)+AntdCSS(380KB)+項(xiàng)目JS代碼(100-300KB) = 800KB- 服務(wù)端必須開(kāi)啟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ú)損壓縮處理
- 前期開(kāi)發(fā)成本上升
- 需要學(xué)習(xí)新的開(kāi)發(fā)方式、組件化開(kāi)發(fā)思路
- 需要初略了解NodeJS開(kāi)發(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/
