序列文章
从项目中由浅入深的学习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里面做路由判断 |
