MboX-使用observable当你的数据变化的时候view自动更新

在 MboX 里面，使得一个数据（model）observable，就相当于告诉 MboX 去 track（跟踪，监视）这个数据。当这个数据变化了，就会自动触发 view 的更新。
一：首先我们来看一个没有用到 MboX 的情况

import {Component} from 'react';
import React from "react";
import ReactDOM from "react-dom";

class Counter extends Component {
  count = 0;
  render() {
    return (
      <div>
        Counter {this.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {}

  handleDec = () => {}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter/>, rootElement);

二：把数据 @observable，组件 @observer，从而数据的变化可以自动地触发 View 的更新

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import {Component} from 'react';
import React from "react";
import ReactDOM from "react-dom";

@observer class Counter extends 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--;}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter/>, rootElement);

三：可以把数据抽离出组件，然后作为组件的一个 prop 传进去

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import {Component} from 'react';
import React from "react";
import ReactDOM from "react-dom";

const counterState = observable({count: 0,});
counterState.incream = function(){this.count ++;}
counterState.decream = function(){this.count --;}
@observer class Counter extends Component {render() {
    return (
      <div>
        Counter {this.props.store.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {this.props.store.incream();
  }

  handleDec = () => {this.props.store.decream();
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter store={counterState}/>, rootElement

四：把数据抽离出组件，但是在组件里面直接使用数据

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import {Component} from 'react';
import React from "react";
import ReactDOM from "react-dom";

const counterState = observable({count: 0,});
counterState.incream = function(){this.count ++;}
counterState.decream =function(){this.count --;}
@observer class Counter extends Component {render() {
    return (
      <div>
        Counter {counterState.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {counterState.incream();
  }

  handleDec = () => {counterState.decream();
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter/>, rootElement);

以上的第二，三，四点是三种不同的方式，使用 obserable 来标记你想 track 的数据，从而和对应的组件 connect 起来。当我的 obserable 数据变化的时候，对应的组件会自动完成 view 的更新。