前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从项目中由浅入深的学习react (2)

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

作者头像
火狼1
发布2019-04-17 13:47:01
1.4K0
发布2019-04-17 13:47:01
举报
文章被收录于专栏:前端小而全的知识归纳
图片描述
图片描述

序列文章

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 序列文章
  • 前言
  • 1.react-mobile篇
    • 1.1 效果图
      • 1.2 技术栈
        • 1.3 适配方案
          • 1.4技能点分析
          • 2.react-pc-template篇
            • 2.1效果图
              • 2.3技术栈
                • 2.4适配方案
                  • 2.5技能点分析
                  相关产品与服务
                  容器服务
                  腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档