Javascript 不同的是，在mobx的action method和plain function中，可观测变量何时更新？

我在ReactJS中使用MBOX进行状态管理

有时我会更新一些函数中的可观察变量，然后它会重新呈现react组件，有时我会使用

@action

方法更新可观察变量

---

那么，这两种场景之间的区别是什么？它对渲染有什么影响？

一个

操作

也是一个

事务

，这意味着从您在操作中更改的观察值派生的任何值都将在

操作

完成后重新计算。如果不将函数包装在

操作中

，则可能会多次计算派生值

示例-操作后重新计算（）

@observer
类应用程序扩展组件{
@可观测x='a'；
@可观测的y='b'；
@计算得到z（）{
console.log（'computing z…）；
返回`${this.x}${this.y}`；
}
onClick=操作（（）=>{
this.x='c'；
this.y='d'；
});
render（）{
返回{this.z}；
}
}

示例-立即重新计算（）

@observer
类应用程序扩展组件{
@可观测x='a'；
@可观测的y='b'；
@计算得到z（）{
console.log（'computing z…）；
返回`${this.x}${this.y}`；
}
onClick=（）=>{
this.x='c'；
this.y='d'；
};
render（）{
返回{this.z}；
}
}

@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>;
  }
}

@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>;
  }
}