-
Mobx 6Framework/SPA 2020. 12. 1. 08:14
1. Overview
- Become compatible with standard modern JavaScript - Dropping Decorators Syntax
- Mobx will work out of the box in most setups version
- Proxy and non-proxy in the same version
- Reduce bundle size - By removing decorators
- Enable strict mode by default - all observables must be updated through actions
2. Decorators
2.1 makeObservable
- A function that receives a target, annotations, and options object
- Usually, the target will be "this" inside the constructor class
- Annotations is an object with key as the property name and value as the functionality we want, for example "{name: observable}"
- if used in subclass or superclass, each of the classes will need to call "makeObservable" again
- For example, if we inherit from a class that uses make observable, we will need to call again, makeObservable.
- Needs to be called after the properties are declared
import { makeObservable, observable, action, computed, autorun } from "mobx"; class Person { id: number = 1; name: string; constructor(name: string) { this.name = name; makeObservable(this, { name: observable, updateName: action, coolName: computed }); } updateName(newName: string) { this.name = newName; } get coolName() { return `im cool ${this.name}`; } } const newPerson = new Person("Georgy"); autorun(() => { console.log(newPerson.coolName); }); newPerson.updateName('New Name');
2.2 MakeAutoObservable
- A function that receives a target, overrides, and the options object
- Cannot be used on sub-class or classes with super call
- converts everything automatically by the next rules:
- Any (inherited) member that is a generator function will be annotated with flow
- Any (inherited) member that contains a function value will be annotated with autoAction
- Any getter will be annotated with computed
- Any other own field will be marked with observable
- Members marked with false in the overrides argument will not be annotated. Use this for, for example, read-only fields such as identifiers.
import { makeAutoObservable, observable, action, computed, autorun } from "mobx"; class Person { id: number = 1; name: string; constructor(name: string) { this.name = name; makeAutoObservable(this, { id: false, }); } updateName(newName: string) { this.name = newName; } get coolName() { return `im cool ${this.name}`; } } const newPerson = new Person("Georgy"); autorun(() => { console.log(newPerson.coolName); }); newPerson.updateName('New Name');
2.3 How to use Decorators
- We can still use decorators, but it is not recommended in the new codebase
- We will need to use "makeAutoObservable" inside the class constructor
- We will need to enable the "experimentalDecorators" flag like before, and a new flag "useDefineForClassFields"
3. Reference
'Framework > SPA' 카테고리의 다른 글
Redux (0) 2020.07.16 Webpack (0) 2020.05.25 Comparison AngularJS, ReactJS, and Vue.JS (0) 2020.04.11 Comparison between AngularJS and ReactJS (0) 2020.04.10 Two-way binding (0) 2020.04.10