从项目中由浅入深的学习react (2)_React

上一篇: React focus 事件的坑下一篇:ReactJS新闻 #25 F8开发者研习会...

从项目中由浅入深的学习react (2)

发布时间：2019-06-11 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了从项目中由浅入深的学习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技能点分析
@H_512_42@

技能点
对应的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里面做路由判断

技能点	对应的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，getDerivedState From Props,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的类

技能点	对应api
路由	基于umi,里面有push,replace,go等方法
状态管理	dva里面的redux的封装,属性有state,effects,reducers
组件传值	父子:props,平级redux或umi的router
model	项目的model和dom是通过@connect()连接并将部分属性添加到props里
登陆	登陆是通过在入口js里面做路由判断

脚本宝典总结

以上是脚本宝典为你收集整理的从项目中由浅入深的学习react (2)全部内容，希望文章能够帮你解决从项目中由浅入深的学习react (2)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: React focus 事件的坑下一篇:ReactJS新闻 #25 F8开发者研习会...

猜你在找的React相关文章

告别webpack react 搭建多页面之痛 2019-06-16
React-Native 写了个 Douban App 2019-06-05
react可高度配置表格/列表组件（react-tabllist） 2019-08-05
reactjsweekly -- React Chrome Dev Tool!! React.js开发者的福音啊！ 2019-06-28
React Router V4 正式版发布 2019-06-19
React学习笔记1---起步 2019-06-06
react 自学之路 2019-06-06
react生成二维码的插件 2019-06-23
React-StepPitGuide《React踩坑指南》- React基础知识 2019-06-13
学习 React:是 ES6还是 React? 2018-11-17

全站导航更多

最新React教程

热门React教程