MobX - 使用observable

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

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的更新。

五：标记observable的三种方式总结
最后我们来总结一个标记一个变量为observable的三种方式：

1: 使用@observable

import { observable, computed } from "mobx"

class OrderLine {
    @observable price = 0
    @observable amount = 1

    constructor(price) {
        this.price = price
    }

    @computed get total() {
        return this.price * this.amount
    }
}

2: 使用observable()

import { observable } from "mobx"
let person = observable({name: 'emma', weight: 50})

3: 使用decorate()

import { decorate, observable, computed } from "mobx"

class OrderLine {
    price = 0
    amount = 1

    constructor(price) {
        this.price = price
    }

    get total() {
        return this.price * this.amount
    }
}

decorate(OrderLine, {
  price: observable,
  amount: observable,
  total: computed
})