React Mobx示例

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { observable, computed, useStrict, action } from 'mobx';
import App from './App';
import * as serviceWorker from './serviceWorker';

class VM{
	@observable firstName = '';//設置屬性爲可觀察的
	@observable lastName = '';

    //設置計算屬性
	@computed get fullName() {
		return this.firstName + this.lastName;
	}

    //設置動作
	@action 
	setName(key, event) {
		this[key] = event.target.value;
	}

    //設置動作，注意，與 @action 不同的是，@action.bound 不需要一個name參數，名稱將始終基於動作綁定的屬性
	@action.bound 
	resetName() {
		this.firstName = '';
		this.lastName = '';
	}
}

//將VM類傳入App
ReactDOM.render(
  <React.StrictMode>
    <App vm={new VM()} />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import { observer } from 'mobx-react';

//設置App爲觀察者
@observer
class App extends Component{
  render(){
    const vm = this.props.vm;
    return (
      <div className="App">
        <p>First Name<input value={vm.firstName} onChange={e => vm.setName('firstName', e)} /></p>
        <p>Last Name<input value={vm.lastName} onChange={e => vm.setName('lastName', e)} /></p>
        <h1>Full Name {vm.fullName}</h1>
        <button onClick={vm.resetName}>resetName</button>
      </div>
    )
  }
}

export default App;

說明：

如果去掉resetName裝飾器的bound，則會報錯如下：