MobX 的三種方式

一.observable 

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observable } from 'mobx';
import { observer } from 'mobx-react';


@observer class Demo extends React.Component<any, any>{
  @observable count = 0;
  render() {
    return(
      <div>
        Counter:{this.props.store.count} <br />
        <button onClick={this.handleInc}>+</button>
        <button onClick={this.handleDec}>-</button>
      </div>
    )
  }
  handleInc = () =>{
    this.count++
  }
  handleDec = () => {
    this.count--
  }
}
ReactDOM.render(<Demo />, document.getElementById('root'));

二.observable

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
const appState = observable({
  count: 0
})
appState.increment = function() {
  this.count++

}
appState.decrement = function() {
  this.count--

}
interface IProps {
  store: any;
}
@observer class Demo extends React.Component<IProps, any>{
  render() {
    return(
      <div>
        Counter:{this.props.store.count} <br />
        <button onClick={this.handleInc}>+</button>
        <button onClick={this.handleDec}>-</button>
      </div>
    )
  }
  handleInc = () =>{
    this.props.store.increment();
  }
  handleDec = () => {
    this.props.store.decrement();
  }
}
ReactDOM.render(<Demo store={appState} />, document.getElementById('root'));

三.observable

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
const appState = observable({
  count: 0
})
appState.increment = function () {
  this.count++

}
appState.decrement = function () {
  this.count--

}
@observer class Demo extends React.Component<any, any>{
  render() {
    return (
      <div>
        Counter:{appState.count} <br />
        <button onClick={this.handleInc}>+</button>
        <button onClick={this.handleDec}>-</button>
      </div>
    )
  }
  handleInc = () => {
    appState.increment();
  }
  handleDec = () => {
    appState.decrement();
  }
}
ReactDOM.render(<Demo />, document.getElementById('root'));