從項目中由淺入深的學習react (2)

序列文章

從項目中由淺入深的學習vue,微信小程序和快應用(1)

前言

從pc(dva+umi)和mobile(原生react)兩個項目來介紹react的使用
搞懂這兩個項目,上手擼react代碼so-easy

1.react-mobile篇

1.1 效果圖

react-mobile項目,歡迎star

1.2 技術棧

react + react-router-v4 + redux +ant-design-mobile+iconfont
react-router-v4:路由4.x版本
redux:狀態管理
ant-design-mobile:UI組件
iconfont:字體icon

1.3 適配方案

rem適配

1.4技能點分析

技能點	對應的api
3種定義react組件方法	1.函數式定義的無狀態組件; 2.es5原生方式React.createClass定義的組件; 3.es6形式的extends React.Component定義的組件
JSX	react是基於jSX語法
react16以前生命週期	實例化(6個):constructor，getDefaultProps,getInitialState,componentWillMount,render,componentDidMount
react16生命週期	實例化(4個):constructor，getDerivedStateFromProps,componentWillMount,render,componentDidMount,componentWillUpdata,render,componentDidUpdate, componentWillUnmount
生命週期	更新(5個) componentWillReceivePorps,shouldComponentUpdate,
生命週期	銷燬:componentWillUnmout
react-dom	提供render方法
react-router 4.x組成	react-router(核心路由和函數) , react-router-dom(API) , react-router-native( React Native 應用使用的API)
react-router 4.x的API	router(只能有一個) , route(匹配路由渲染UI) , history, link(跳轉) , navlink(特定的link,會帶樣式) , switch(匹配第一個路由) , redirect(重定向) , withRouter(組件,可傳入history,location,match 三個對象)
react-router 3.x組成	就是react-router
react-router 3.x的API	router , route , history(push和replace方法) , indexRedirect(默認加載) , indexRedirect(默認重定向) , link(跳轉) , 路由鉤子(onEnter進入,onLeave離開)4.x已經去掉
history	react-router有三種模式: 1.browserHistory(須要後臺支持); 2.hashHistory(有'#'); 3.createMemoryHistory
redux	單向數據流 , action(經過dispatch改變state值) , reducer(根據 action 更新 state) , store(聯繫action和reducer)
react-redux	1.鏈接react-router和redux,將組件分爲兩類:UI組件和容器組件(管理數據和邏輯) , 2.connect由UI組件生成容器組件 , 3.provider讓容器組件拿到state , 4.mapStateToProps:外部state對象和UI組件的props映射關係, 5.mapDispatchToProps:是connect第二個參數， UI 組件的參數到store.dispatch方法的映射
react-loadable	代碼分割,至關於vue-router中的路由懶加載
classNames	動態css的類

2.react-pc-template篇

2.1效果圖

react-pc-template項目, 歡迎star

2.3技術棧

dva+umi+ant-design-pro
dva:可拔插的react應用框架,基於react和redux
mui:集成react的router和redux
ant-design-pro:基於react和ant-pc的中後臺解決方案

2.4適配方案

左側固定寬度，右側自適應
右側導航分別配置滾動條.控制整個page

2.5技能點分析

技能點	對應api
路由	基於umi,裏面有push,replace,go等方法
狀態管理	dva裏面的redux的封裝,屬性有state,effects,reducers
組件傳值	父子:props,平級redux或umi的router
model	項目的model和dom是經過@connect()鏈接並將部分屬性添加到props裏
登錄	登錄是經過在入口js裏面作路由判斷