Difference when an observed variable is updated inside an action method and a simple function in mobx?

Question

I use MBOX to manage state in ReactJS .

I someday update an observable variable inside some function, and also redefine a component of reaction, and sometimes I use a method @actionfor updating an observable variable.

So, what is the difference between the two scenarios and what effect will it have on rendering?

Answer 1

An action transaction, , , , action. action, .

- (JS Bin)

@observer
class App extends Component {
  @observable x = 'a';
  @observable y = 'b';
  @computed get z() {
    console.log('computing z...');
    return `${this.x} ${this.y}`;
  }

  onClick = action(() => {
    this.x = 'c';
    this.y = 'd';
  });

  render() {
    return <div onClick={this.onClick}> {this.z} </div>;
  }
}

- (JS Bin)

@observer
class App extends Component {
  @observable x = 'a';
  @observable y = 'b';
  @computed get z() {
    console.log('computing z...');
    return `${this.x} ${this.y}`;
  }

  onClick = () => {
    this.x = 'c';
    this.y = 'd';
  };

  render() {
    return <div onClick={this.onClick}> {this.z} </div>;
  }
}