react

安装：
全局安装脚手架一次 $ cnpm install -g create-react-app
创建项目 creact-react-app-myapp
启动项目 npm start

万物皆组件:
react 最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component
但是 注意 注意 注意 ! 组件名必须是大写， 否则报错 !!!!

jsx语法糖:
jsx 是一种语法糖， 全称 : javascrpit + xml ， 只能借鉴了一些xml 语法 ，例如：
最外层必须有根节点、标签必须闭合

• jsx借鉴xml的语法而不是html的语法原因：xml要比html严谨，编译更方便
• react中jsx里的注释要写成{/ /}的方式

css:

直接是.css 文件后缀的 会引起 是全局都可以用 会冲突

不会引起样式冲突

用 .module.css 就会有作用域 不用引起全局 引入 import style from ‘xx.module.css’ 用： className={style.xxx(设置的class名)}

index.module.css文件  里面就是写样式 
import style from "./index.module.css";
 <div className={style.bottom}>

点击：、

第一种方法：
onClick = {this.handleClick}  
handleClick = () => {
}
第二种方式：
onClick = {this.handleClick.bind(this)}
handleClick() {
}

diff 算法

就是为了减少Dom操作  提高性能

项目：

cnpm中国的 比较快 npm国外 比较慢 就要切换到淘宝镜像源

创建脚手架

1. 全局安装脚手架一次 npm install -g create-react-app

1.创建项目 create-react-app 项目名字

这是函数写法：

import React from 'react'
function App () {
    <div>
        hello    
    </div>
}
import React from 'react'
import ReactDOM from 'react-dom';
ReactDOM.render({
    <App></App>,
    document.getElementById('root')
}) 
// 页面渲染 ： hello

这是class 写法：

class App extends React.Component{
  render () {
    return (
    <div>
      你是李四
    </div>
    )
    }
}
import React from 'react'
import ReactDOM from 'react-dom';
ReactDOM.render({
    <App></App>,
    document.getElementById('root')
}) 
// 页面渲染:  你是李四

定义class 要写 className

绑定 ref 写法 refs.

setState（） 更新状态:

// setState 如果是在异步中执行的话 里面就是同步执行的
// setState 并不保证是同步的
// batchUpdate 批处理

jsx中数组的遍历操作：

//vue的模板中遍历数组 ==> <li v-for="item in arr">{{item}}</li>
//React
//遍历数组  arr.map
//为什么加key?
//key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
var arr = ["aa","bb","cc"]
ReactDOM.render(
    <div>
        {
            arr.map((item,index)=>{
                return <p key={index}>{item}</p>
            })
        }
    </div>,
document.querySelector("#box"))

实现对象的遍历 ===> 不会的转成会的

要加key！ 为了 diff算法

map 遍历

.map(item => {

return (<></>)

})

map方法 必须有返回值 最好加个括号

for in 也可以

属性和状态的对比

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以
7. 
   

数据保存在哪个组件内？

应该给共同的父组件

子组件不能直接改变父组件的状态，状态在哪个组件，更新状态的行为就应该定义在那个组件

父组件定义函数，传递给子组件，子组件调

组件化编写功能的流程：

拆分组件 实现静态组件(只有静态界面，没有动态数据和交互) 实现动态组件 实现初始化数据动态显示 实现交互功能

props:

父 -> 子通信 就是给数据 子 直接 用this.props.传过来的参数 通过属性

用在父子通信 给子传值

import myPropTypes from "prop-types";  // 里面包含数据类型验证方法
// 属性验证 ：验证每一个属性类型
 // 关键字 属性验证哦
  static propTypes = {
    // static propTypes 是固定写法
    mytext: myPropTypes.string,
    isShow: myPropTypes.bool,
  };
--------------------------------------------------------------
// 默认属性 ：不传属性时候的默认值。
// 这里是设置默认属性的哦
  static defaultProps = {
    isShow: true
  }

子传父 通过回调函数 向上传递

ref 通信：

{

console.log(this.refs.box.state.myname)
this.refs.box.handleEvent('来自父子的简单问候')

}}>click

非父子通信1：

// 找共同的父元素 定义数据

// 父组件给子组件定义一个 ‘电话’ 然后子组件有事可以直接拨打 ‘电话’ 给父组件

// 子组件一层一层往上找 找到最后的父组件

// 中间人模式

非父子通信2：发布订阅机制

订阅 subscribe 绑定监听

发布 publish 触发事件

工具库 PubSubJS

下载 npm install pubsubjs —save

import PubSub from ‘pubsub-js’ 引入

发布订阅模式

// 这个因为 一发布 订阅就会执行 所在订阅那里修改

// 点击那个按钮 就调用 发布

一个订阅好了 一发布就会执行过去 还可以传参就是调用发布的时候

• bus ==> 相当于vue —-$on $emit
• mounted生命周期

const bus = {
    list: [] , // 每次新的都放进数组
    // 订阅方法
    subscribe(callback){
        console.log(callback)
        // 收集callback
        this.list.push(callback)  // 添加到数组
    }
    // 发布方法
    dispatch(data) {
        // 遍历list, 将list 里面的每一个函数，进行回调调用
        console.log(this.list[0])
        this.list[0](data)
    }
    <button onClick= {() => {
          // 发布
          bus.dispatch('来自侄子的问候')  // 直接调用就是发布的意思  这里触发发布
        }}>切换</button>
}
// 在App组件里
export default class App extends Component {
  state = {
    isShow: true,
  };
  // 订阅者订阅方法调用
  componentDidMount() {
    console.log('dom渲染完的生命周期-订阅,axios')
    bus.subscribe((data) => {
      console.log('app组件中定义的回调函数',data)
      this.setState({
        isShow:!this.state.isShow
      })
    })
  }

---

Context上下文环境 也是非父子通信

---

React生命周期流程：

React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，挂载、更新、卸载、错误处理

挂载阶段

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

   注意:
   下述生命周期方法即将过时，在新代码中应该避免使用它们：
   UNSAFE_componentWillMount()

###更新阶段

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

1. static getDerivedStateFromProps()
   2. shouldComponentUpdate()
   3. render()
   4. getSnapshotBeforeUpdate()
   5. componentDidUpdate()

注意:
下述方法即将过时，在新代码中应该避免使用它们：
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()

###卸载阶段

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()

###错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

1. static getDerivedStateFromError()
2. componentDidCatch()

---

react生命周期各个阶段

i 初始化阶段

componenetWillMount : 挂载之前 render之前最后一次修改状态的机会

render： 正在渲染 只能访问this.props和 this.state，不允许修改状态和DOM输出

componentDidMount： 组件已经挂载完成 成功的render并渲染完成真实DOM之后触发，可以修改DOM 在这里可以发送 ajax 请求

ii 运行中阶段

componentWillReceiveProps: 父组件修改属性触发

shouldComponentUpdate: 返回false 会阻止render调用 这个可以让他不重复进行渲染 这里可以做判断 与之前的状态做对比 默认是返回是true 如果当新状态与老状态一样的时候 就可以让他返回false 可以阻止重新调用

componentWillUpdate : 不能修改属性和状态 修改之前

render： 只能访问this.props和 this.state， 不允许修改状态和DOM输出

componentDidUpdate: 可以修改DOM 修改完成

iii 销毁

componentWillUnmount() : 组件将要被移除回调

新增：

getDerivedStateFromProps： 这个生命周期 包含了 componentWillMount 挂载前 和 componentWillReceiveProps 父传子的时候也会触发就是父组件修改属性的时候

// 这个新的生命周期不能和老的生命周期一起用;

  static getDerivedStateFromProps(nextProps,nextState){
    console.log(nextState);  //老数据
    return {
      text: "keri"+nextState.text, // 这个就相当于直接修改了属性 只能改一次  跟那个componentWillMount是一样的
    };
  }

getSnapshotBeforeUpdate ：这个生命周期就是相当于挂载前 componentWillUpdate 用了这个的话 会先执行先渲染render 渲染完成立马执行 getSnapshotBeforeUpdate 然后这个必须有个返回值 返回值 可以在更新完成那个生命周期的第三个参数接收

// 这个新的生命周期不能和老的生命周期一起用;

  getSnapshotBeforeUpdate() {
    // 新增更新前  这个必须要有个返回值
    console.log("getSnapshotBeforeUpdate");
    return 100; // 老的scrollHeight
  }
  componentDidUpdate(prevProps, prevState, oldHeight) {  // 这个第三个参数就是更新前返回 回来的
    // 更新完成
    console.log("componentDidUpdate" ,oldHeight);
  }

PureComponent： 这个是性能优化 可以来做判断 组件更不更新 如果是一样的就不会更新 不一样的就会更新

这个判断相当于作了判断：

 // 组件应该更新吗？ 应该true, 不应该返回false
  // 性能优化生命周期
  // shouldComponentUpdate(nextProps,nextState){
  //     console.log("shouldComponentUpdate")
  //     console.log("老的状态",this.state)
  //     console.log("新的状态",nextState)
  //     // return true
  //     if(JSON.stringify(this.state)===JSON.stringify(nextState)){
  //         return false
  //     }
  //     return  true
  // }

---

react-router 路由

• history 基于这个插件库
• `专门用来实现一个 SPA 应用`` 单页Web应用, 就是只有一张Web 页面的应用是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序
• 基于react的项目基本都会用到此库

2.几个重要问题：

1). SPA应用

单页Web应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
当点击链接时, 只会做页面的局部更新
数据都需要通过ajax请求获取, 并在前端异步展现

2.路由

1.什么是路由？
     一个路由就是一个映射关系(key:value)
     key路由路径，value 可能是 function / component
2.路由分类
    后台路由: node 服务器端路由，value是fonction ，用来处理客户端提交的请求并返回一个响应数据
    前台路由： 浏览器路由，value是 component，当请求的事路由path是，浏览器端没有发送http请求，但界面会更新显示对应的组件
3.后台路由
    * 注册路由： router.get(path,function(req,res))
    * 当node接收到一个请求是，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
  * 前端路由
       * 注册路由: <Route path='/about' component={About}> 指向的事/about  显示的是 About组建的内容
       * 当浏览器的hash变为#about 时，当前路由组件就会变成 About组件

3.关于url中的

1.理解#
   '#'代表网页中的一个位置，其右面的字符串，就是该位置的标识符
   改变#不触发网页重载
   改变#会改变浏览器的访问历史
2.操作#
     window.location.hash 读取#值
     window.onhashchange = func 监听hash 改变
3.学习资源
       阮一峰教程: http://www.ruanyifeng.com/blog/2011/03/url_hash.html

4.react-router 的学习资源

github主页: https://github.com/ReactTraining/react-router
官网教程: https://github.com/reactjs/react-router-tutorial
阮一峰教程: http://www.ruanyifeng.com/blog/2016/05/react_router.html

相关API

1.react-router 中的相关组件：

Route:  路由组件， 注册路由 路由规则匹配组件，显示当前规则对应的组件
IndexRoute: 默认子路由组件
hashHistory: 路由的切换由 URL 的hash 变化决定,即URL的#部分发生变化
Link: 路由连接组件     ------相当于  a标签
<NavLink />: 路由连接 选中的还有高亮显示  路由跳转
Switch组件:   让switch组件内容的route 只匹配1个，只要匹配到了，剩余的路由规则将不再匹配
如果要精确匹配，那么可以在 route 上设置 exact 属性
<Redirect />  重定向  to='/重新定义的路径'

2.Router:路由器组件:

属性:  history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配
子组件: Route

3.Route: 路由组件：

属性1. path='/xxx'
属性2. component={Xxx}
根路由组件: path='/'的组件，一般为App
子路由组件: 子<Route>配置的组件

4.IndexRoute: 默认路由：

当父路由被请求时, 默认就会请求此路由组件

5.hashHistory:

用于Router组件的history属性
作用: 为地址url生成?_k=hash, 用于内部保存对应的state

6.Link：路由链接：

属性1: to="/xxx"
属性2: activeClassName="active"

！！！ exact!!! 这里一定要加精确匹配 不然 回次就会到这个重定向的路由页面

！！！ 这个也要加 这个是只会匹配一次 然后就会退出 向二级路由必加 一级路由也是

exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用)

withRouter 是一个高阶函数，它的作用是让那些没有被Route 包裹的组件拥有this.props.hitstory 等api

声明式导航：

编程式导航： this.props.history.push(‘/路径’) 先打印this 看看有没有路由信息 如果没有就不能跳转 就要用 withRouter 函数 ，接受一个组件作为参数 ,返回一个父组件包着我们传入的组件 withRouter 高阶组件， 获取低阶组件，生成高阶组件 就可以相当于路由包裹了

最流行的开源React UI 组件库

material-ui (国外)

官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui

ant-design（国内蚂蚁金服）

官网: https://ant.design/
github: https://github.com/ant-design/ant-design/

ant-design使用入门

2). 搭建antd的基本开发环境

1. 下载
    npm install antd@2.7.4 --save
2. src/App.js
    import React, { Component } from 'react';
    import { Button } from 'antd';
    import './App.css';
    class App extends Component {
      render() {
        return (
          <div className="app">
            <Button type="primary">Button</Button>
          </div>
        );
      }
    }
    export default App;
3. src/App.css
    @import '~antd/dist/antd.css';
    .app {
      text-align: center;
    }

3). 实现按需加载(组件js/组件css)

---

生命周期：

componentWillMount 创建实例前

render 渲染数据

componentDidMount 创建实例完成

componentWillUpdate 更新前

componentDidUpdate 更新完成 这个每次都会重新请求 不会判断如果是一样的就不更新

shouldcomponentUpdate(nextProps,nextState) nextProps新的值 nextState老的值 这个可以判断是否更新 默认是true更新 就会一直更新 不应该更新就返回false 这里就是要判断应不应该更新 如果更新之后的值和之前的值是一样的话 就返回 false 不让他更新了

componentWillReceiveProps(nextProps) nextProps更改之后的值 这个生命周期 是在 父组件属性发生改变才会触发

componentWillunmount 销毁就会触发这个

新增生命周期：

初始化： getDeriveStateFromProps(nextProps,nextState) nextState老数据 nextProps更新之后的数据 使用的时候要加 static getDerivedStateFromProps(nextProps,nextState)

更新: getDeriveStateFromProps(nextProps,nextState) nextState老数据 nextProps更新之后的数据 这个生命周期只要是父组件调用 setState 就会走整个的更新阶段，

getDeriveStateFromProps 这个生命周期 相当于两个作用 一个是初始化的时候一个更新就的时候就是父组件属性发生属性发生改变就会触发这里

更新：getSnapshotBeforeUpdate 这个就是更新之前会触发的 ，但是的话就是先会执行render渲染 然后立马执行 getSnapshotBeforeUpdate 然后这个必须有返回值 这个返回值可以在更新完成那个生命周期的第三个参数接收到

这个相当于有个快照的感觉，就是一渲染立马会记录那个状态，这个是渲染在更新，会记录那个瞬间的值

react中性能优化的方案

PureComponent 可以判断组价更不更新 一样的就不更新 就是与之前的数据是不是一样， 就是做了判断

组件应该更新吗? 应该 true ，不应该返回 false

性能优化生命周期： 相当于做了这个判断

  shouldComponentUpdate(nextProps,nextState){
      console.log("shouldComponentUpdate")
      console.log("老的状态",this.state)
      console.log("新的状态",nextState)
      // return true
      if(JSON.stringify(this.state)===JSON.stringify(nextState)){
          return false
      }
      return  true
  }

三目判断 === 路由拦截

localStorage.getItem(‘token’)?: exact }

react 万物皆组件 路由也是一个组件哦

---

反向代理:

src/setupProxy.js 创建这个js文件 然后将下面的代码加进去

这个是配置！！
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/ajax",  // 这个意思是 请求的地址是以 /ajax开头
    createProxyMiddleware({
      target: "https://m.maoyan.com",  // 目标地址  就是域名 没有后面的参数
      changeOrigin: true,
    })
  );
};

这个是代码中请求数据     
componentDidMount() {
    axios.get(
      "/ajax/mostExpected?ci=30&limit=10&offset=0&token=&optimus_uuid=70C014E07FEB11EAA52A3DDA0D474E85E683330B47564DFD979940521918C01E&optimus_risk_level=71&optimus_code=10"
    ).then(res =>
        console.log(res.data)
      );
      }

---

粒子背景动效插件

import Particles from 'react-particles-js';
 render(){
        return (
        <div style={{ height: '100%'}}>
            <Particles 
             height={window.innerHeight - 5}
            />
              <Form   ....  />
            </div>
            }
    可以在div 设置个背景 不然是白色的设置高度
   Particles  在这后面设置  window.innerHeight - 5 就是整个浏览器屏幕的高度  就能沾满整个屏幕了

---

json-server 数据模拟 mock服务器

// mock服务器 ,mockup,json-server 数据模拟的解决方案

简单的来说就是做加数据的 但是这个假数据做增删改查 很方便

下载： $ npm install -g json-server

创建一个 db.json 文件 ：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

运行：

json-server --watch db.json

 axios.get   axios.post axios.put  axios.delete    查 增 改（更新）  删

---

axios 解决跨域

下载：

---

export default class xxx extends Component {

这里面定义的数据都可以 直接使用 this.  来获取

}

---

富文本编辑器

下载 $ npm install —save react-draft-wysiwyg

这个是转成html 语言 ： npm install —save draftjs-to-html

---

Redux

$ npm i —save redux

redux有四个组成部分：

store：用来存储数据
reducer：真正的来管理数据
actionCreators：创建action，交由reducer处理
view： 用来使用数据，在这里，一般用react组件来充当

在redux创建 store.js

import { createStore } from "redux";  引入这个
这个接受两个参数  第一个参数是 preState 老状态  第二个参数 action 是传过来的参数
const reducer = (preState , action) => {
    console.log(action)  // 这个就是传过来的参数
      // action 自动传来要修改成什么值？
     // prevsState.isCollapsed = action;   // 这样是错的  不允许直接修改 需要进行深复制 才能修改
  // 深复制 preState老状态 , 返回修改后的新状态
  let { type,payload } = action
  switch (type) {
   // type 为  xiong
    case "xiong":
      // 处理折叠
      let newState = { ...preState }; // 深复制
      newState.isCollapsed = payload;
      return newState;
      case "zi":
      break ;
      default:
      return preState; // 如果没有匹配到 就返回老的状态
  }
}
const store = createStore(
  reducer,
  {
    isCollapsed: false, //  初始化状态
    roleList: [], // 初始化状态
    rightList: [], // 初始化状态
    userList: [],
  },
  composeEnhancers(applyMiddleware(reduxPromise, reduxThunk))
); //第二参数， 可以设置中间件 || 初始状态
//第三个参数 应用中间件， promise,让redux dispatch 方法支持promise对象
//composeEnhancers 这个是为了使用哪个插件 能在浏览器看到状态
// 把 store 导出去
export default store;

发布 发布类型 发布参数

1.  引入那个  store文件
  // 这个是点击然后触发发布
  toggle = () => {
  // 发布者
  store.dispatch({
      type:'xiong' // 这个是随便的没有规定
      payload: true   
  })  // 传的对象  就是 action
  }

订阅 获取参数 store.getState()

引入那个 store js文件
 // 写在生命周期里  componentDidMount
 componentDidMount() {
     //订阅方法，离开组件，一定要取消订阅
     this.unscribe = store.subscribe(() => {
       console.log("我是sideMenu中订阅者",store.getState())
            //store.getState() 获取最新状态
            // 重新给状态
            this.setState({
                collapsed:store.getState().isCollapsed
            })
            console.log(this.unscribe) 是一个函数体
     })
 }
 // 销毁
    componentWillUnmount(){
        //销毁
        this.unscribe() //取消方法
    }

还可以拆分写！！！

订阅方法，离开组件，一定要取消订阅

Redux 三个原则

单一数据源

State 是只读的

使用纯函数来执行修改 为了描述 action 如何改变 state tree ，你需要编写 reducers。

reducer必须是个纯函数：

• 1.对外界没有副作用的函数
• 2.同样的输入得到同样的输出

reducer需要满足纯函数设计

如果有多个 reducer 需要进行拆分

需要一部处理的话 需要引入中间件 (applyMiddleware(reduxPromise, reduxThunk))

---

redux插件

react-rudux:

$ npm install —save react-redux

核心组件：
Provider 提供者 属性上通过store将数据派给容器组件
connect 用于连接容器组件与UI组件

最外面加 Provider 给connect创建的组件分发 store

这个就是给所有的孩子元素都加了 store

connect 这个相当于连接

connect(mapStateToProps , mapDispatchToProps)( )

第一个参数写法

就是状态  定义了一个 a状态  
// connect 拿到了 store.getState()
// state   这个是获取的状态   store.getState()
const  mapStateToProps = (state)=>{
    console.log(state)
    return {
        a:1，
       isCollapsed: state.isCollapsed,
    }
}

第二个参数写法

可以写多个  mapDispatchToProps 形参 名字随便 
// change(obj) 方法要通过子组件传过来  obj就是子组件传过来的数据
// 子  this.props.change({
    一些数据
})   
const mapDispatchToProps = {
    change(obj){
        console.log("change-connect约定好，传给topheader的回调",obj)
        return obj
    },
    aaa(){
    }
}

// mapStateToProps 代表第一个参数 获取公共状态 传属性 这个相当于订阅 一发布这个就会跟着变化 每次都是最新的值

// mapDispatchToProps 代表第二个参数 传回调函数 这个相当于 dispatch发布分发

：会有监听作用 只要 Redux store 发生改变，mapStateToProps 函数就会被调用

---

图表插件

使用：

$ cnpm install echarts --save  下载
给个div 
: render() {
    return (
      <div ref='myechart' style={{width: '100%' , height: '400px' }}></div>
    )
  }
  在这个生命周期里面写:  componentDidMount() {
      // 这个是绑定那个div 挂载到全局 为了后面的window自适应
       this.myChart = echarts.init(this.refs.myechart);
     // 指定图表的配置项和数据
     var option = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  };
  // 使用刚指定的配置项和数据显示图表。
  this.myChart.setOption(option);
     // 这个是控制宽度 大小 自适应窗口
   window.onresize = () => {
    this.myChart.resize()
  }
  }
   // 销毁 清空
  componentWillUnmount() {
    window.onresize = null;
  }

---

数据格式处理 Lodash 这个也是一个插件

---

Mock 和联调

json-server ( $ json-server —watch .\存数据的文件名 )

json-server --watch 文件名 --port 5000
更改端口号

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞

---

用户分配角色

哪些角色可以操作哪些操作

用户登入不一样 然后登入进来看到的东西不一样

从路由开始 页面搭建

---

redux：

数据共享 数据缓存

mobx:

mobx写法上更偏向于oop

对一份数据直接进行修改操作，不需要始终返回一个新的数据

并非单一store 可以多store

redux默认以javascript 原生对象形式存储数据，而mobx使用可观察对象

hook:

主要是为了给函数式组件加状态 函数组件中没有this

import React , {useState} from 'react'
function App() {
    // 定义状态
    const [name,setName] = useState('kerwin') // useState参数是要定义的状态初始值，返回值是一哥数组，数组的第一个原生是状态，第二个元素是改变状态的唯一方法
    return <div>
        app-hooks-state
        {name} - <button onClick = {() => {
            setName('xioaming')
        }}> click </button>
    </div>
}