MobX 处理 Observable State

MobX 是一个管理响应式状态（reactive state）的库，能以非常方便且简洁的方式管理组件状态。

以下是一个例子：

@observer
class Counter extends React.Component {

  @observable
  count = 0;

  render() {
    return (
      <div>
        Counter: {this.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {
    this.count++;
  }

  handleDec = () => {
    this.count--;
  }
}

一旦我们使用 observer 注解标注一个类或者函数组件，它将能自动订阅 observable 值或者对象发生的变化。比如，在上面的例子中，对 count 的修改能导致组件的自动重新渲染。