MobX

mobx

MobX是一个经过实战测试的库，它通过透明地应用功能反应式编程（TFRP）使状态管理变得简单和可扩展，是一个类组件 通过@修饰一个组件。

步骤

1.下包
2.需要导出 npm run eject
3.再package.json里配置babel,支持装饰器语法
4.和react和语法差不多 需要provider进行
@abservable 模块的数据
@action 模块的行为
@connect

注意事项

1. 需要下载三个包
   “babel-plugin-transform-decorators-legacy”: “^1.3.5”, 支持装饰器
   “mobx”: “^5.7.0”, 支持mobx
   “mobx-react”: “^5.4.2” 支持合react集成
2. 导出webapck配置
   npm run eject
3. 再package.json里配置babel，支持装饰器语法
   “babel”: {
   “presets”: [
   “react-app”
   ],
   “plugins”: [
   ["@babel/plugin-proposal-decorators", { “legacy”: true }]
   ]
   }

代码展示

新建一个仓库 store /modules->count.js
count.js
import {observable, action} from 'mobx'

export default class Count{
    // 模块的数据
    @observable count = 100;

    // 模块的行为
    @action changeCount(type){
        type==='+'?this.count++: this.count--
    }
}

store里的index.js
// 加载子模块count
import Count from './modules/count';

// 引入日志
import {autorun} from 'mobx';

let count = new Count();

autorun(()=>{
    console.log('count change...', count.count);
})

export default {
    count
}

App.js
import React from 'react';
import './App.css';
import {inject, observer} from 'mobx-react'

@inject('count')
@observer
class App extends React.Component{
  
  render(){
    console.log('this.props...', this.props);
    return <div>
      <button onClick={()=>this.props.count.changeCount('+')}>+</button>
      <p>{this.props.count.count}</p>
      <button onClick={()=>this.props.count.changeCount('-')}>-</button>
    </div>
  }
}

export default App;
 
modx里的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// 引入Provider注入mobx数据
import {Provider} from 'mobx-react'
// 引入mobx的store
import store from './store'

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

仅供参考！