何为 MobX ？
MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP) 使得状态管理变得简单和可扩展。MobX背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得。 其中包括UI、数据序列化、服务器通讯，等等。
MobX中文文档中的这幅图介绍了四个重要概念：Action、State、ComputerValues 和 Reactions。
我们使用MobX可以根据业务的具体需要划分多个 Store，然后将数据状态（State）和更新操作（Actioin） 从组件中抽离出来单独管理，这样更利于组件间的通信管理。归纳起来，MobX 就是要做 MVVM 的分层，将 V 与 M 进行解耦。
如何使用？
首先，安装 MobX
npm install mobx --save npm install mobx-react --save
然后，通过以下步骤为项目接入 Mbox
- 创建并编写store文件；
- 在父组件中，将store文件引入，并在父组件内进行
new Store()； - 通过
<Provider store={this.store}>标签将store传给子组件使用； - 子组件使用时通过
@inject('store名称')，将store注入组件中去；
看一个例子
就一个账户登录的例子，按照标准的 React 范式实现如下：
import * as React from 'react'; class Form extends React.Component { constructor(props) { super(props); this.state = { username: '', password:'' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { const target = event.target; const value = target.value; const name = target.name; this.setState({ [name]: value }); } handleSubmit(event) { alert('user: ' + this.state.username+' passwd: '+this.state.password); } render() { return ( <form onSubmit={this.handleSubmit}> <label> UserName: <input name="username" type="text" value={this.state.username} onChange={this.handleChange} /> </label> <label> Password: <input name="password" type="password" value={this.state.password} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } } ReactDOM.render( <Form />, document.getElementById('root') );
按照上面的步骤，我们使用MboX一步步对其进行重构：
创建 Store
首先，定义一个class，它仅包含最基本的数据结构：password和username。为了规范起见，我们把它命名为Store(Store.js)。
import { observable } from 'mobx'; class Store { @observable password = ""; @observable username = ""; } export default new Store();
@observable 是一种让数据的变化可以被观察的方法。 考虑生产者/消费者模型，这里我们就把password和username标记为了生产者，接下来消费者将监听他们的变动。
在子组件中，使用两个装饰器 @inject, @observer 实时监听获取store中的属性。需要注意的，可以监听的属性必须是 store中使用 @observable 修饰过的。
建立子组件，订阅Observable
下面我们提取一个子组件，把它命名为Login.jsx。
import * as React from "react"; import { observer, inject } from 'mobx-react'; @inject('store') @observer class Login extends React.Component { render() { return ( <form> <label> UserName: <input name="username" type="text" value={this.props.store.username} /> </label> <label> Password: <input name="password" type="password" value={this.props.store.password} /> </label> <input type="submit" value="Submit" /> </form> ); } }
@inject('store')将父组件中<Provider store={this.store}> 的 store 注入到子组件，而后可以使用this.props.store获取。 也就是说 @inject ('example') 对应 <Provider example={this.store}>
@observer 用来将 React 组件转变成响应式组件，以确保数据变化时组件即使刷新。需要特别留心：给数据加@observable，给组件加@observer，不要搞混了
完成这个步骤，你会发现并没有什么用处，甚至程序没有按预期运行，这是因为我们只解决了生产者-消费者分离的问题，没有绑定相关动作。
绑定action
接下来在 Store.js 中绑定两个动作：用户修改 & 提交登录。
import { observable } from 'mobx'; class Store { @observable password = ""; @observable username = ""; @action.bound handleChange(evt) { this[evt.target.name] = evt.target.value; } @action.bound handleSubmit(evt) { alert('user: ' + this.username+' passwd: '+this.password); } } export default new Store();
动作可以用来修改状态，@action 标记了可以修改状态数据的方法。
注意 @action 和 @action.bound的区别, 使用 @action 的代码如下：
@action handleChange = (evt) => { this[evt.target.name] = evt.target.value; }
@action.bound 不能箭头函数一起使用，因为箭头函数已经是绑定过的不能重新绑定。
然后我们在子组件中使用它这个动作：
//... <form onSubmit={this.props.store.handleSubmit}> <input name="username" type="text" onchange={this.props.store.handleChange} value={this.props.store.username} /> <input name="password" type="password" onchange={this.props.store.handleChange} value={this.props.store.password} /> </form> //...
完成父组件
我们在父组件里进行最终的组合。
import * as React from 'react'; import { Provider } from 'mobx-react'; import { Store } from './Store'; //引入Store.js import Login from './Login'; //引入Login.jsx class Form extends React.Component { constructor(props) { super(props); this.store = new Store(); } render() { return ( <Provider store={this.store}> <Login></Login> </Provider> ); } } ReactDOM.render( <Form />, document.getElementById('root') );
至此，我们使用 MobX 对标准 React 代码进行了重构。 重构后的代码 M 层（Store.js）和 V 层（jsx）更加清晰。
最后，再来与 Vue 做一个对比。 MobX 为 React 提供了响应式的能力，某种程度上讲，然 React 开发的体验更接近 Vue， Vue的作者尤雨溪曾这样进行对比：
Mobx 在 React 社区很流行，实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上，React + Mobx 也可以被认为是更繁琐的 Vue，所以如果你习惯组合使用它们，那么选择 Vue 会更合理。
