序列文章从项目中由浅入深的学习vue,微信小程序和快应用(1)前言从pc(dva+umi)和mobile(原生react)两个项目来介绍react的使用 搞懂这两个项目,上手撸react代码so-easy1.react-pc-template篇1.1效果图react-pc-template项目, 欢迎star1.2技术栈dva+umi+ant-design-prodva:可拔插的react应用框架,基于react和reduxmui:集成react的router和reduxant-design-pro:基于react和ant-pc的中后台解决方案1.3适配方案左侧固定宽度，右侧自适应右侧导航分别配置滚动条.控制整个page1.4技能点分析技能点对应api3种定义react组件方法1.函数式定义的无状态组件; 2.es5原生方式React.createClass定义的组件; 3.es6形式的extends React.Component定义的组件JSXreact是基于jSX语法react16之前生命周期实例化(6个):constructor，getDefaultProps,getInitialState,componentWillMount,render,componentDidMountreact16生命周期实例化(4个):constructor，getDerivedStateFromProps,componentWillMount,render,componentDidMount生命周期更新:5个生命周期生命周期销毁:componentWillUnmout路由基于umi,里面有push,replace,go等方法状态管理dva里面的redux的封装,属性有state,effects,reducers组件传值父子:props,平级redux或umi的routermodel项目的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项目,欢迎star2.2 技术栈react + react-router-v4 + redux +ant-design-mobile+iconfontreact-router-v4:路由4.x版本redux:状态管理ant-design-mobile:UI组件iconfont:字体icon2.3 适配方案rem适配2.4技能点分析技能点对应的apireact-dom提供render方法react-router 4.x组成react-router(核心路由和函数) , react-router-dom(API) , react-router-native( React Native 应用使用的API)react-router 4.x的APIrouter(只能有一个) , route(匹配路由渲染UI) , history, link(跳转) , navlink(特定的link,会带样式) , switch(匹配第一个路由) , redirect(重定向) , withRouter(组件,可传入history,location,match 三个对象)react-router 3.x组成就是react-routerreact-router 3.x的APIrouter , route , history , indexRedirect(默认加载) , indexRedirect(默认重定向) , link(跳转) , 路由钩子(onEnter进入,onLeave离开)4.x已经去掉historyreact-router有三种模式:1.browserHistory(需要后台支持); 2.hashHistory(有’#’); 3.createMemoryHistoryredux单向数据流 , action(通过dispatch改变state值) , reducer(根据 action 更新 state) , store(联系action和reducer)react-redux1.连接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也不同,一些高级用法后续再更新