序列文章
从项目中由浅入深的学习 vue, 微信小程序和快应用 (1)
前言
从 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-prodva: 可拔插的 react 应用框架, 基于 react 和 reduxmui: 集成 react 的 router 和 reduxant-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+iconfontreact-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 也不同, 一些高级用法后续再更新