mobx 是如何实现它的魔力的

Question

我很好奇 mobx 是如何工作的。

如果我有一个既是观察者又包含可观察对象的组件：

@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()) 的 shorthand（它实际上有点复杂，但这就是它概念上的归结）

Answer 2

MobX 使用 Object.defineProperty() 将它自己的功能包装到赋值运算符中。当你写类似 form.submitted = false 的东西时，实际上会调用 MobX 方法。另见 https://twitter.com/dan_abramov/status/741633922694586368 and https://x-team.com/blog/es5-object-defineproperty-method/.

Answer 3

根据我的理解，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 4

要了解 mobx 的幕后工作原理，请查看 this repl。

我是从@mweststrate 的一个视频和某人的一篇学术论文中了解到的。这两个我都找不到了。

mobx 是如何实现它的魔力的

how does mobx achieve its magic

reactjs

mobx