Question

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

我有时更新某个函数中的observable变量，而不是重新渲染react组件，有时我用@action方法来更新可观察变量。

那么两个场景之间的差异以及它对渲染的影响是什么？

Answer 1

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

差异，当在mobx中的动作方法和普通函数内更新可观察变量时？

1 个答案: