简单实现react+mobx

前面写过关于react+redux的文章
简单实现react+redux

这里对Redux和Mobx进行简单的对比:

1. Redux的编程范式是函数式的而Mobx是面向对象的;
2. 因此数据上来说Redux理想的是immutable（不可更改）的，每次都返回一个新的数据而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;
3. 然而和Redux相比，使用Mobx的组件可以做到精确更新，这一点得 益于Mobx的observable; 对应的，Redux是用dispath进行广播,通过Provider和connect来比对前后差别控制更新力度;Mobx更加精细一点。

一张图理解mobx

1.创建项目

create-react-app app

2.进入项目

cd app

3.进行配置文件抽离

npm run eject

这里可能会出现无法解压资源包的问题,提示git未提交

This git repository has untracked files or uncommitted changes:

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-app@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-app@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

解决办法：

//先使用
git add .
//然后
git commit -m "init"
//然后再
npm run eject

4.安装mobx mobx-react

mobx 是状态管理工具
mobx-react 是做数据分片和数据获取

npm install mobx mobx-react

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

npm install babel-plugin-transform-decorators-legacy -D
npm install @babel/preset-env -D
npm install babel-plugin-transform-class-properties -D
npm install @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"

项目中 mobx应该怎么用？
在创建store的时候，需要使用class来创建一个状态，再通过实例化对象来使用状态

import {
     action, observable} from "mobx";

class userStore{
     
    //@observable观察数据变化
    @observable num=0;
    @computed    //当数据变化时发生改变时， 自动触发
    get（只读） num(){
     
         return this.num * 2
       }
    //@action修改状态的方法/事件
    @action
    change(){
     
        this.num++;
    }
}

export default userStore

在store/index.js进行其他store的实例化处理

//导入需要实例化的store
import userStore from "./userStore";

let user=new userStore();
const store={
     
    user
}
export default store

在入口文件中 使用Provider来传入数据

//导入需要使用的包和store
import {
     Provider} from "mobx-react";
import store from "./store/index";

//provider组件将我们的store注入App组件
//provider相当于一个数据容器

ReactDOM.render(
    //provider不同的传值方式导致的后面调用方式发生改变
    //第一种：
    <Provider store={
     store}>
        <App/>
    </Provider>,
    //第二种：解构之后
    <Provider {
     ...store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)
;

需要在那个组件里面使用store里面的值就在当前组件中引入inject[‘provider的名字’]
在页面中的获取
这是使用store={store}

//注入需要使用的状态
import {
     inject, observer} from 'mobx-react'
@inject('user')
@observer

this.props.store['这是inject的名称'].user['这是store的状态变量名']
//虽然this.porps里面没有找到 @action 装饰器定义的方法， 但是可以直接使用，
//直接使用的方法就是
this.props.store.user.change()
//可以嵌套在其他页面事件触发时使用
//但是由于this会丢失的原因
//点击事件要加上 bind(this)
this.props.store.user.bind(this)

这是使用{…store}

import {
     inject, observer} from 'mobx-react'
@inject('user')
@observer

//可以直接访问变量名
this.props.user['这是store的状态变量名']
//虽然this.porps里面没有找到 @action 装饰器定义的方法， 但是可以直接使用，
//直接使用的方法就是
this.props.user.change()
//可以嵌套在其他页面事件触发时使用
//但是由于this会丢失的原因
//点击事件要加上 bind(this)
this.props.store.user.bind(this)