序列文章
前言
從pc(dva+umi)和mobile(原生react)兩個項目來介紹react的使用
搞懂這兩個項目,上手擼react代碼so-easy
1.react-pc-template篇
1.1效果圖
react-pc-template項目, 歡迎star
1.2技術棧
dva+umi+ant-design-pro
dva:可拔插的react應用框架,基於react和redux
mui:集成react的router和redux
ant-design-pro:基於react和ant-pc的中後臺解決方案
1.3適配方案
左側固定寬度，右側自適應
右側導航分別配置滾動條.控制整個page
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 |
| 生命週期 | 更新:5個生命週期 |
| 生命週期 | 銷燬:componentWillUnmout |
| 路由 | 基於umi,裏面有push,replace,go等方法 |
| 狀態管理 | dva裏面的redux的封裝,屬性有state,effects,reducers |
| 組件傳值 | 父子:props,平級redux或umi的router |
| model | 項目的model和dom是通過@connect()連接並將部分屬性添加到props裏 |
| 登陸 | 登陸是通過在入口js裏面做路由判斷 |
1.5那麼問題來了?
三種定義react組件方式的區別?解析
umi的router傳參形式? 解析
dva封裝的redux和原生的redux使用有那些不同? dva使用解析redux使用解析
umi裏面router實現原理?umi源碼
對比vue和react在原理和使用上的區別?
2.react-mobile篇
2.1 效果圖
react-mobile項目,歡迎star
2.2 技術棧
react + react-router-v4 + redux +ant-design-mobile+iconfont
react-router-v4:路由4.x版本
redux:狀態管理
ant-design-mobile:UI組件
iconfont:字體icon
2.3 適配方案
rem適配
2.4技能點分析
| 技能點 | 對應的api |
|---|---|
| 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 , 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.5 那麼問題來了
1.react-router 3.x和react-router 4.x的區別?
react-router 3.x文檔
react-router 4.x文檔
2.redux和react-redux的關係?
react-redux和redux介紹
3.react-router 4.x取消了路由鉤子怎麼做登陸授權判斷?
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)利用路由的render屬性來做攔截,判斷是否授權,否則利用redirect重定向
3.結語
這個相當於react的入門篇,擼項目是完全可以
但react生態超級繁榮,同一個功能插件版本不同,對應的api也不同,一些高級用法後續再更新