Tengo curiosidad por saber cómo funciona mobx bajo el capó.

Si tengo un componente que es a la vez observador y contiene observables:

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

  @action.bound
  submit() {
  }
}

¿Cómo causa mobx un re-render sin usar setState o usa setState?

3
dagda1 4 may. 2017 a las 00:07

3 respuestas

La mejor respuesta

Ver: https: // medium. com / @ mweststrate / convertirse en completamente reactivo y una explicación en profundidad de mobservable-55995262a254. @observer es básicamente una abreviatura de autorun(() => this.render()) (en realidad es un poco más complejo, pero eso es a lo que se reduce conceptualmente)

6
mweststrate 4 may. 2017 a las 06:54

MobX utiliza Object.defineProperty() para ajustar su propia funcionalidad al operador de asignación. Cuando escribe algo como form.submitted = false, en realidad se llama un método MobX. Consulte también https://twitter.com/dan_abramov/status/741633922694586368 y https://x-team.com/blog/es5-object-defineproperty-method/.

0
Stephan Rauh 19 feb. 2019 a las 11:35

Según tengo entendido, mobx define sus propiedades observables en tiendas como esta:

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)

Cuando ejecute customState.firstName = 'New name', esto llamará al método set en la propiedad y observer.next activará todos los métodos suscritos a esta propiedad ... causando actualización en la IU.

0
Lokii 18 may. 2020 a las 18:03