react中mbox的创建与使用

1. 创建项目

create-react-app myapp

2. 进入项目

cd myapp

3. 进行配置文件抽离

npm run eject

4. 安装mobx mobx-react

mobx 是状态管理工具

mobx-react 是做数据分片和数据获取

npm install mobx mobx-react

注意： 如果git冲突
解决： 我们要原文件先放到本地暂存盘

git add .
git commit -m ''

​ 然后 ： 安装mobx mobx-react’
​ 注意不要git push

5. 配置装饰器（ 修饰器 es6 ） babel

npm install babel-plugin-transform-decorators-legacy -D @babel/preset-env -D babel-plugin-transform-class-properties -D @babel/plugin-proposal-decorators -D

6. 配置package.json

   "babel": {
	    "plugins": [
	      [
	        "@babel/plugin-proposal-decorators",
	        {
	          "legacy": true
	        }
	      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    },

  注意： 以下两个配置顺序不可更改
     [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"

2. mobx 使用

3. 新建store

   src
     |-- store
	   |-- index.js :入口文件
	   |-- user.js
	   |-- shop.js 

2. 在入口文件文件，src/index.js中使用Provider

   import store from './store'
   import { Provider } from 'mobx-react'

   ReactDOM.render(
     <Provider store = {store}>
       <App />
     </Provider>
   , document.getElementById('root'));

3. 哪个组件使用 ， 就在哪个组件中 “注入” inject
   // 注入后
   this.props.名称.变量名
   注：打印this.props.user 打印出来，没有action 对应的方法
   ，但是，可以直接使用

import React from 'react'
import {inject,observer} from 'mobx-react'
@inject('user')
@inject('product')
@observer
class CountNum extends React.Component
{
    addNum(){
        this.props.user.changeNum();
    }
    render()
    {
        return (
            <div>
                <h2>计数器</h2>
                {this.props.product.productName}
                {this.props.user.num}
                <button onClick={this.addNum.bind(this)}>+</button>
            </div>
        )
    }
}

export {CountNum as default}

4. 打造mobx 数据包

   import {
     observable, computed,action
   } from 'mobx'
   
   class Home {
     @observable  //监听 age
       age = 18

     @computed    //当age发生改变时， 自动触发
       get doubleAge(){
         return this.age * 2
       }

     @action  // 用户操作  事件调用
       increment(){
      
       //数据请求
       fetch('/data/data.json')
       .then(res => res.json())
       .then( result => console.log( result ))
       .catch( error => console.log( error ))
     }

 }

 const home = new Home()

 export default home

5. 打造store

store/index.js
   import home from './home'
   const store = {
     //实例
     home
   }

   export default store

6. 组件内使用数据

this.props.store.xxx 可以拿到数据

注意：

this.porps里面没有找到 @action 装饰器定义的方法， 但是可以直接使用，

this会丢失

this.props.store.home.increment.bind(this)