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，则会报错如下：