简单实现react+mobx

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

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

Redux的编程范式是函数式的而Mobx是面向对象的;因此数据上来说Redux理想的是immutable（不可更改）的，每次都返回一个新的数据而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;然而和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)