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

leap_frog 发布于2019-08-23 16:42 / 3187人阅读

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用前言从和原生两个项目来介绍的使用搞懂这两个项目上手撸代码篇效果图项目欢迎技术栈路由版本状态管理组件字体适配方案适配技能点分析技能点对应的种定义组件方法函数式定义的无状态组

序列文章

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

云服务器 GPU云服务器怎么部署react项目从云服务器中获益的企业深度学习的项目 java项目中的调度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103168.html

从项目中由浅入深的学习koa 、mongodb(4)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习从项目中由浅入深的学习前言的出现前端已经可以用一把梭从前端写到后台。 showImg(https://segmentfault.com/img/bVbrRI5?w=1920&h=1080); 序列文章从项目中由浅入深的学习vue,微信小程序和快应用 (1)从项目中由浅入深的学习react (2)从项目中由浅入深的学...

null1145 2019-06-26 18:01 评论0 收藏0
从项目中由浅入深的学习typescript (3)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习前言为什么会有大家有没想过这个问题原因是是弱类型编程语言也就是申明变量类型可以任意变换。是的超集，也相当于预处理器本文通过一个项目来让你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章从项目中由浅入深的学习vue,微信小程序...

ninefive 2019-08-23 16:59 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0