使用react框架做的web后台管理系统技术总结
react后台管理系统学习笔记
全局下载脚手架: npm install -g create-react-app
创建项目:create-react-app react-admin
开发运行和生产环境下打包运行
本地仓库代码推送到远程仓库(两种方式）
远程克隆到本地，粘贴代码，再上传
创建本地仓库，关联到远程，再上传
上传步骤分析:
git init(初始化仓库)
git add .(将代码推送到缓存)
git commit -m '' first''(将代码推送到仓库)
git push （上传代码）
git status (查看是否有新文件可以推送)
关联远程仓库,推送到远程仓库
<Switch/>只匹配其中一个路由
常见高阶函数：
函数参数是函数类型
返回值是函数
定时器
Promise
数组遍历相关方法
高阶组件可以扩展组件的功能
async+await 简化promise对象的使用
不用再使用then(),promise异步执行的成功value数据， 直接可以得到请求服务返回的数据
以同步编码方式实现异步流程
withRouter高阶组件:包装非路由组件，返回一个新的组件
新组件向非路由组件传递3个属性:history/location/match
当父组件向子组件传递函数属性时，最终子组件会调用函数向父组件传值。
JSX语法
jsx语法的解析规则是:遇到XML标签<>，以xml规则解析；遇到代码块{}，就用javascript规则解析；
功能界面的组件化编码流程
拆分组件
实现静态组件(只有静态界面，没有动态数据和交互)
实现动态组件
实现初始化数据动态显示
实现交互功能
开发环境
微软Window操作系统
浏览器
命令行环境
代码编辑器(webstorm)
Node.js （本身不依赖于Node.js） ---Node package Manager
npm 是Node.js的安装包管理工具
create-react-app工具
因为React技术依赖于一个很庞大的技术栈转译javascript代码需要使用babel,模块打包工具需要使用webpack，所以facebook提供了一个快速构建react应用的工具----create-react-app，
create-react-app是一个通过npm发布的安装包
npm install --global create-react-app
create-react-app first_react_app
cd first_react_app
npm start
组件化编程
React的首要思想是通过组件来开发应用
组件是指能够完成某个特定功能的独立的、可重用的代码，如果分解功能的过程足够巧妙,那么每个组件可以在不同场景下重用
index.js作为我们每个应用的入口文件
导入需要的模块
import React from 'react'
import ReacDom from 'react-dom'
另一种形式 import {render} from 'react-dom'
React.createClass方式创建组件类已被废弃
在使用jsx的范围内必须要有React
JSX
jsx是JavaScript的语法扩展(eXtension)，可以在js中编写像HTML一样的代码
在jsx使用的元素不局限于HTML中的元素，可以是React中的组件,react判断一个元素是html元素还是react组件，看第一个字母是否大写
onClick挂载的每个函数都可以在控制在组件范围内,不会污染全局空间
React的组件把JavaScript、HTML、CSS的功能在一个文件中,实现真正的组件封装
不是所有的浏览器都支持所有的ES6语法,但是babel会把ES6语法的javascript代码转译成浏览器普遍支持的javascript代码
React 的 理念 ，归结于一个公式,就像下面这样:UI=render(data)
当更新data,用户界面自然会在出响应,所以react实践也是响应式编程(Reactive Programming)的思想
虚拟DOM （virtual Dom）
在react的实现方式中，看起来每次render函数被调用,都要把整个组件重新绘制一次，react拥有虚拟DOM，每次渲染都只重新渲染最骚的DOM元素
浏览器为了渲染HTML格式的网页,会先将HTML文本解析以构建DOM树,然后根据DOM树渲染出用户看到的界面，当要改变界面内容的时候，就去改变DOM树上的节点
虚拟DOM不会触及浏览器的部分，只是存在于javascript空间的树形结构,每次自上而下渲染react组件时，会对比这一次产生的虚拟DOM和上一次渲染的虚拟DOM,对比就会发现差别,然后修改真正的DOM树就只需要触及差别中的部分就行了。
React组件的原则和方法
高内聚: 把逻辑相关的内容放在一个组件中
低耦合:不同组件之间的依赖关系要尽量弱化，也就是说每个组件尽量独立
React组件的数据
React组件的数据分为两种,prop和state
prop是组件对外接口
state是组件的内部状态
对外用prop，对内用state
在react中，prop是从外部传递给组件的数据，一个react组件通过定义自己能够接收的prop就定义了自己的对外公共接口
每个react组件都是独立存在的模块，组件之外的一切都是外部世界,外部世界就是通过prop来和组件对话的。
当prop的类型不是字符串类型时，jsx必须用花括号{}把prop值包住
路由跳转/路由链接
当点击路由链接时，会发生页面的局部更新
路由：映射关系(key,value)
什么是路由？
a.一个路由就是一个映射关系(key,value)
b.key为路由路径，value可能是function/component
<Link></Link> //路由链接
<Route path='路由路径' component={路由组件}></Route> //路由 (包含路由路径，和路由组件)，一个路由路径对应一个路由组件
withRouter ， 让普通组件拥有路由组件的属性
<Switch></Switch>路由切换，里面可以包含多个<Route/>，是从上下进行匹配，一但匹配成功就不会往下进行匹配
<Redirect></Redirect>重定向
create-react-app是一个React的脚手架，用它可以很方便的就创建了整个React搭建环境，解决了是所有的依赖问题
电脑环境要求：node.js， npm(下载的node会自带)
npm install 、npm install --save npm install --save-dev
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下.
发布后用不到的依赖包使用--save-dev
dependencies下的模块是发布还需要用到
export default 后面不用加{}
如果没有默认暴露,就需要用{}括起来
