前言
本文基于React共享单车后台管理系统的开发进行学习记录，内含React生态系统的整体介绍及相关内容整理，方便自己查阅，也希望对小伙伴有所帮助
React基本介绍
Facebook开源的一个JavaScript库
React结合生态构成的一个MV* 框架
React特点
- Declarative(声明式编码)
- Component-Based(组件化编码)
- 高效-高效的Dom Diff算法，最小化页面重绘
- 单向数据流
生态介绍
Vue生态：
Vue+Vue-Router+Vuex+Axios+Babel+WebpackReact生态：
React+React-Router-Redux+Axios+Babel+WebpackReact生命周期介绍
getDefaultProps
通过这个方法，来初始化一个Props属性，Props就来自于父组件
getInitialState
初始化state，可以直接在constructor中定义this.state
componentwillMount
组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state
render
是一个React组件必须定义的生命周期，用来渲染dom，是使用最多，最重要的放方法
componetDidMount
组件渲染之后调用，只调用一次
componentwillReceiveProps
组件加载时不调用，组件接受新的props时调用
shouldComponentUpdate
组件接收新的props或者state时调用
componentwillUpdate
在组件接收新的props或者state但还没有render时被调用，在初始化时不会被调用
componentDidUpdate
组件完成更新后立即调用，在初始化时不会被调用
componentWillUnmount
在组件从DOM中移除之前立刻被调用
Redux
Redux基本介绍
单项数据流：
从父组件流向子组件，兄弟组件无法共享数据
state：
React中的状态，是只读对象，不可直接修改
Reducer：
基本函数，用于对state的业务处理
Action：
普通对象，用于描述事件行为，改变state
Redux安装
yarn add redux --save
yarn add react-redux --saveRedux集成
创建Action模块
创建Reducer模块
创建Store模块
通过connect方法将React组件和Redux连接起来
添加Provider作为项目的根组件，用于数据的存储
Redux调试工具安装
在Chrome中安装Redux Devtools扩展
yarn add redux-devtools-extensionReact脚手架、Yarn介绍
安装React脚手架
npm install -g create-react-app //安装这个脚手架
create-react-app may-app //初始化一个项目
cd my-app //切换
npm start //启动进入什么是Yarn?
Yarn是新一代的包管理工具
为什么使用Yarn?
- 速度快
- 安装版本统一，更安全
- 更简洁的输出
- 更好的语义化
如何使用Yarn？
yarn init //初始化一个项目
yarn add //安装一个包
yarn remove //删除一个包
yarn / yarn install //安装依赖包源码仓库地址
源码地址：https://github.com/shifengmin...
搭建运行环境
安装脚手架
npm install -g create-react-app查看版本号，看是否安装成功
create-react-app --version初始化这个项目
create-react-app imoocmanager切换
cd imoocmanager启动进入
npm start安装yarn
npm install -g yarn查看版本号，看是否安装好
yarn --version注：
这个项目没有webpack配置，这就是脚手架的特色，脚手架把webpack的配置全部给它封装起来了，所以只需要关心src的源码部分
项目所需要安装的插件
引入antd(安装支付宝的UI框架)
yarn add antd --save加入其它依赖
yarn add axios --save //Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
yarn add jsonp --save //跨域请求
yarn add less --save //(2.7.3的版本)，超过此版本，antd按需加载报错.bezierEasingMixin();
yarn add less-loader --save //antd 用的是less预处理，所以也添加less,保持一致。
yarn add moment --save //日期处理
yarn add babel --svae //转换react jsx语法和转换es6 语法后才能兼容智障浏览器
yarn add babel-polyfill --save
yarn add babel-plugin-import --save //不添加的话 IE会报错TypeError: 对象不支持“startsWith”属性或方法开发过程中重点问题总结
主页面架构设计
页面结构定义
- 左侧导航栏，右侧显示内容
- 右侧显示内容分别分为Header、中Content和下Footer部分
目录结构定义
- 定义components包，分别加入Footer、Header、NavLeft包，内部加入index.js文件，导入时可以导入到包的级别，系统会自动寻找包下的index.js文件
- 定义style包，内部加入common.less文件定义全局样式
栅格系统使用
- 栅格系统一共24列
- Antd中行用Row组件，列使用Col组件，列存在span属性(span={长度值}的方式写入span属性)，同一Row下的Col span总和为24
calc计算方法使用
- clac()是less中动态计算长度值
- 任何长度值都可以用clac()函数进行计算
- calc(100vh):vh的含义相当于1%,100vh即是100%
例子使用：
width:clac(100%-50px) //表示宽度属性是整个布局的100%减去50px的长度关于less
- less是预编辑器
- 在div下有a标签，想设定a的样式和div的样式，在less中可以在定义时嵌套
//css中
div{...}
div a{...}
//less中
div{
...
a:{
...
}
}- less可以使用定义的变量
@colorA:'red'
div{
color:@colorA
a:{
color:black
}
}实例公共代码
admin.js
import React,{Component} from 'react'
import { Row,Col } from 'antd';
import Header from './components/Headers/index'
import Footer from './components/Footer/index'
import NavLeft from './components/NavLeft/index'
import './style/common.less'
// import Row from './components/NavLeft/index'
export default class Admin extends Component{
render (){
return(
{this.props.children}
)
}
}
src/style/commmon.less
.container{
display: flex;
.nav-left{
background-color:#001529;
color: #ffffff;
height: calc(100vh);
}
.main{
height: calc(100vh);
background-color: @colorL;
overflow: auto;
}
.content{
position: relative;
padding: 20px;
}
}实例代码-左侧导航栏内容
src/components/NavLeft/index.js
import React,{Component} from 'react'
import { Menu, Icon } from 'antd';
import MenuConfig from './../../config/menuConfig'
import './index.less'
const SubMenu = Menu.SubMenu;
export default class NavLeft extends Component{
componentWillMount(){
const menuTreeNode = this.renderMenu(MenuConfig);
this.setState ({
menuTreeNode
})
}
//菜单渲染
renderMenu =(data)=>{
return data.map((item)=>{
if(item.children){
return (
{this.renderMenu(item.children)}
)
}
return {item.title}
})
}
render (){
return(
BikeSharing
)
}
}在public文件夹下添加assets文件夹，放置logo-ant.svg图片
注意：public文件是build文件是build之后存储内容的文件，通常内部放置静态资源，public下的文件内容在访问时全是通过根目录直接访问文件地址
编写Navleft组件内容/src/Navleft/index.js，使用antd中的Menu和Icon组件，Menu组件的theme属性可以设置菜单样式。对应的SubMenu组件需要设置title和key属性值，Menu.Item组件需要设置title和key属性值和组件内容
src/NavLeft/index.less
编写Navleft组件样式
.logo{
line-height: 90px;
padding-left: 20px;
background-color: #002140;
img{
height: 35px;
}
h1{
color: #ffffff;
font-size: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
}
}src/config/menuConfig.js
const menuList = [
{
title:'首页',
key:'/admin/home'
},
{
title:'UI',
key:'/admin/ui',
children:[
{
title:'按钮',
key:'/admin/ui/buttons',
},
{
title:'弹框',
key:'/admin/ui/modals',
},
{
title:'Loading',
key:'/admin/ui/loadings',
},
{
title:'通知提醒',
key:'/admin/ui/notification',
},
{
title:'全局Message',
key:'/admin/ui/messages',
},
{
title:'Tab页签',
key:'/admin/ui/tabs',
},
{
title:'图片画廊',
key:'/admin/ui/gallery',
},
{
title:'轮播图',
key:'/admin/ui/carousel',
}
]
},
{
title:'表单',
key:'/admin/form',
children:[
{
title:'登录',
key:'/admin/form/login',
},
{
title:'注册',
key:'/admin/form/reg',
}
]
},
{
title:'表格',
key:'/admin/table',
children:[
{
title:'基础表格',
key:'/admin/table/basic',
},
{
title:'高级表格',
key:'/admin/table/high',
}
]
},
{
title:'富文本',
key:'/admin/rich'
},
{
title:'城市管理',
key:'/admin/city'
},
{
title:'订单管理',
key:'/admin/order',
btnList:[
{
title:'订单详情',
key:'detail'
},
{
title:'结束订单',
key:'finish'
}
]
},
{
title:'员工管理',
key:'/admin/user'
},
{
title:'车辆地图',
key:'/admin/bikeMap'
},
{
title:'图标',
key:'/admin/charts',
children:[
{
title:'柱形图',
key:'/admin/charts/bar'
},
{
title:'饼图',
key:'/admin/charts/pie'
},
{
title:'折线图',
key:'/admin/charts/line'
},
]
},
{
title:'权限设置',
key:'/admin/permission'
},
];
export default menuList;在config下编写manuConfig.js返回导航栏内容title和key
效果如下：
实例代码首页头部内容
利用jsonp可以解决跨域问题（所谓跨域就是跨域名，跨端口，跨协议）
web页面上调用js文件时则不受跨域影响（且凡是有src属性的标签都具有跨域能力，如