Question

我很好奇mobx如何在幕后工作。

如果我的组件既是观察者又包含observables：

@observer
export default class Form extends Component {
  @observable submitted = false;

  @action.bound
  submit() {
  }
}

mobx如何在不使用setState的情况下重新渲染，还是使用setState？

Answer 1

请参阅：https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254。 @observer基本上是autorun(() => this.render())的简写（它实际上有点复杂，但这就是它的概念归结为）

Answer 2

据我所知，mobx在商店中定义了它的可观察属性，如下所示：

export const nameObservable = new Observable(observer => {
  Object.defineProperty(customState, "firstName", {
    get: function() {
      return this._firstName.toUpperCase();
    },
    set: function(name) {
      this._firstName = name;
      observer.next(this._firstName);
    }
  });
});

// In your component
nameObservable.subscribe(render)

当您执行customState.firstName = 'New name'时，这将调用属性上的set方法，而observer.next将触发所有订阅该属性的方法...导致UI更新。

Answer 3

要了解mobx的工作原理，请检查this repl。

我从@mweststrate的视频之一和某人的学术论文中学到了这一点。我都找不到了。

Answer 4

MobX使用Object.defineProperty()将其自身的功能包装到分配操作符。当您编写类似form.submitted = false的内容时，实际上会调用MobX方法。另请参见https://twitter.com/dan_abramov/status/741633922694586368和https://x-team.com/blog/es5-object-defineproperty-method/。

mobx如何实现其魔力

4 个答案: