Ant Design 是什么
AntDesign(簡稱Antd): 是螞蟻金服開發和服務于企業級后臺產品。
- Antd提供一套開箱即用的高質量 React 組件
- Antd擁有完整的一套設計規范
直接看Antd官方文檔
React是什么
React是Facebook開源的一個前端框架，官方Slogen是“一次學習，隨處編寫”。現在在阿里、騰訊、知乎和眾多新興項目、新興公司中被廣泛應用，也是Github現階段Start最多的前端框架，
其特點是：
- 組件化
- 在React中，頁面中所有元素都由組件組成
- 組件復用提高效率
- 項目如果規劃有度，會逐步形成自己的組件庫，前端項目開發會越來越快
- 虛擬DOM
- 虛擬DOM就是由JS對象模擬DOM樹，每次頁面中需要更新DOM的時候，JS在循環生命周期中統一對比當前和歷史狀態的DOM樹差異一并更新差異到真正的DOM上。
- 優勢1: 直接操作修改DOM雖然更快，但是如果頻繁操作DOM就沒有這種統一對比操作修改的性能高
- 優勢2: 由于JS代碼操作的是虛擬的DOM，所以只要在其他平臺把圖層對虛擬DOM進行映射就可以達到跨平臺的目的，而前端的開發方式不需要改變，這個思路的衍生品是ReactNative、微信小程序、阿里Weex。
- 優勢3: 純JS開發界面會獲得更高的自由度，這也是AntDesign誕生的原由。
- 單頁Web應用（Single Page Web Application，SPA）
- 由于是虛擬DOM，整個項目絕大部分代碼是JS，所以很自然的就是一個SPA應用，SPA有利有弊，但是當SPA應用使用了ReactRouter，就擁有了多頁應用的絕大部分特性(甚至有過之)。SPA的缺點在文后會有提及。
- 單頁應用項目中切換頁面不需要訪問服務器，切換速度迅捷。
- JSX
- JSX是Javascript中嵌入了XML代碼，編寫過程中與JS無異，JSX只是為了讓純JS創建DOM元素變得更加便捷，Babel會把其中的XML代碼轉化為純JS代碼，所以不會有兼容性問題, 下面是一段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}} >
我是一個div標簽
</div>
)
}
}
module.exports = Comp
小貼士：
- React只是一個項目的視圖層，如果要編寫大型項目需要配合ReactRouter、Redux(或Mobx)
- React生態非常活躍，有眾多第三方組件，Antd只是其中之一。
- React可以和絕大部分第三方JS、CSS配合使用，例如Bootstrap、Jquery、Anmina.js等等
- 不要直接使用Jquery或者document.getElementById去操作已被渲染的DOM
- React的Slogen是“一次學習，隨處編寫”。會了React之后簡單學習一下衍生項目就可以開發其他平臺的原生應用，如ReactNative開發iOS應用、Android應用；Electron+React開發Window、Mac桌面應用。
直接看React官方文檔
React全家桶
項目中會用到的第三方包
- create-react-app 官方腳手架
- Facebook官方的腳手架，零配置搭建基于webpack的React開發環境
- 集成了Webpack、babel(把高版本JS代碼編譯成低版本的JS代碼)、flexbugs-fixes(低版本Flex兼容編譯)、WebLiveReload(開發時，啟動一個Nodejs服務器，實時監聽代碼刷新頁面)、并且打包時給JS、CSS文件名都添加了隨機的字符，以解決版本更新時JS緩存的問題。
- Redux 單向數據流，狀態管理
- 單向數據流可以很好的管理整個項目的狀態
- 單純的Redux只有2KB
- ReactRouter 單頁應用路由
- 使用了Router，單頁應用也可以和多頁應用一樣，每個頁面、狀態都有自己的路由地址
- Antd 螞蟻金服UI組件
- ReactMotion 動畫框架
- 高性能彈性動畫
白璧微瑕
缺點及應對措施
- SPA導致于內容頁無法SEO，百度的搜索引擎在搜索到某個頁面時，只會檢索HTML文件中的字符，而SPA頁面只有少數HTML文件，DOM樹是由JS運行后生成，不會被搜索引擎檢索到。
- 需要SEO的頁面需單獨編寫
- 若項目對大部分頁面都有SEO要求，可使用服務端渲染可以解決所有頁面的SEO(開發成本會大幅度上升)
- 首頁加載時間較長
React(131KB)+ReactRouter(50KB)+AntdCSS(380KB)+項目JS代碼(100-300KB) = 800KB- 服務端必須開啟gzip，可以將以上代碼壓縮至250KB，基本解決首頁加載問題
- 在首屏用不到的第三方包需要使用懶加載。懶加載不會增加首屏加載時間
- Antd整個JS項目有1.25MB，按需加載Antd組件, 可大幅度降低Antd的JS代碼，例如只使用一個Button編譯后50KB
- 從其他地方節約出這些JS代碼的體積，例如所有圖片都要進行無損壓縮處理
- 前期開發成本上升
- 需要學習新的開發方式、組件化開發思路
- 需要初略了解NodeJS開發環境
- React全家桶的學習成本較高
文尾：全副武裝，才能在需求面前存活
相關文檔
- 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/
