react_Hez全框架

前言

框架的本身是用于生产。react是不错的选择，他的api少，使用react对javasript要求高。如果你使用php或者java，vue是不错的选择，如果要走javasript全栈。react是你javasript的练兵场。
简单点，我整合了react-app，react-router-dom，mobx，axios，成为一套可以快速投入的生产的框架合集。使用它，记住一下几点就能简单使用：

• 组件
• 路由
• 数据流
  
• axios请求

了解开发流程

使用响应式开发React很带劲。通俗的说使用Ant Design获其他框架来组合业务功能，在Mobx下编写业务逻辑。 组件事务调动mobx来更新页面，并且更新事务
**

组件

全都是组件，这是react的设计灵魂。App.js全局数据流并建设路由

<Provider {...AppStore}>
    <HashRouter>
        <Switch>
            <Route exact path="/" component={Index}/>
            <Route path="/home/:id" component={Home}/>
            <Route path="/My/:id" component={My}/>
        </Switch>
    </HashRouter>
</Provider>

路由

查询页面路由参数

//装载组件
componentWillMount() {
    console.log(this.props.match.params);
}

跳转路由页面（参数自定义添加）

this.props.history.push('/')

数据流

一整个mobx文件可以看作数据池，项目的全部api数据可以放在这里。好处是这是一个规范，别人接受或者修改能清楚不少。index汇聚各个数据流

import {observable,action} from 'mobx';
import todo from './todo'
import  order from './order'
export default {
    todo,
    order
}

不经包含数据，还有数据数据的处理方式，并且是异步的

import { observable, action, useStrict } from 'mobx';
import {get} from '../utils/api'
// useStrict(true);
var Order = observable({
    texts: '未选中'
});
Order.hez = action( async (e)=>{
    let getData = await  get('v2/movie/top250',{})
    console.log(getData.data)
    Order.texts= getData.data;
});
export default Order

你要使用装饰器

@inject('order', 'todo')            //组件需要引用的的数据
@observer
<p> {this.props.order.texts} </p> //渲染数据
this.props.order.hez('请求结果') //调用hez方法

axios请求

先配置package.js，免得跨域错误，然后 npm run start

"proxy": "https://douban.uieee.com/"

在mobx中使用axios，包含get，post，put，deletes（异步）

import { observable, action, useStrict } from 'mobx';
import {get} from '../utils/api'
// useStrict(true);
var Order = observable({
    texts: '未选中'
});
Order.hez = action( async (e)=>{
    let getData = await  get('v2/movie/top250',{})        //发起请求体
    console.log(getData.data)
    Order.texts= '选中';
});
export default Order

文档写的比较着急，后面会慢慢更新，有问题微信联系我，