这是我参与更文挑战的第6天，活动详情查看：更文挑战

何为 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')
);
复制代码