Stan i reaktywność

Stan $mol zachowuje się jak arkusz kalkulacyjny: deklarujesz, jak obliczana jest wartość, a wszystko, co od niej zależy, aktualizuje się samo. Bez store'ów, bez dispatch, bez hooków efektów — graf zależności śledzi, co przeliczyć.

Właściwości reaktywne

Metoda ozdobiona @ $mol_mem to buforowana, reaktywna komórka. Wykonuje się raz, zapamiętuje swój wynik i przelicza tylko wtedy, gdy zmieniło się coś, co przeczytała.1namespace $.$$ {2 export class $my_counter extends $.$my_counter {3 @ $mol_mem count() { return 0 }4 5 @ $mol_mem doubled() {6 return this.count() * 27 }8 }9}doubled czyta count, więc automatycznie subskrybuje count. Zmień count, a każdy widok pokazujący doubled się odświeży — nie ma nic do ręcznego subskrybowania.

Odczyt i zapis

Właściwość jest zarówno getterem, jak i setterem: wywołaj ją bez argumentu, aby odczytać, z argumentem, aby zapisać.1@ $mol_action2increment() {3 this.count( this.count() + 1 )4}

Akcje kontra obliczenia

To jedno rozróżnienie utrzymuje kod reaktywny przewidywalnym:@ $mol_mem to czyste obliczenie — tylko czyta inne komórki i zwraca wartość.@ $mol_action to efekt — zapisy do stanu, wywołania sieciowe i timery należą tutaj.Zapis do komórki z wnętrza @ $mol_mem tworzy pętlę sprzężenia zwrotnego (zapis unieważnia zależność, która się przelicza, która znów zapisuje). $mol zgłasza to jako cykliczną subskrypcję. Poprawka jest zawsze ta sama: trzymaj efekty uboczne w akcjach, utrzymuj obliczenia czyste.W @ $mol_mem możeszale nieHandlery przycisków są generowane jako @ $mol_mem na klasie bazowej; nadpisz je przez @ $mol_action, aby mogły bezpiecznie zapisywać:1@ $mol_action2submit() {3 this.saved( true )4}

Stan pochodny się komponuje

Ponieważ zależności są śledzone automatycznie, wartości pochodne łączą się w łańcuch bez żadnego okablowania. Każda czyta poprzednią; zmiana w korzeniu rozchodzi się dokładnie tak daleko, jak trzeba:1@ $mol_mem full_name() {2 return `${ this.first() } ${ this.last() }`.trim()3}4 5@ $mol_mem greeting() {6 return this.full_name() ? `Hello, ${ this.full_name() }!` : 'Hello!'7}Edytuj tę stronę na GitHubieCzy to było pomocne?TakNiePoprzedniaWidoki NastępnaRoutingNa tej stronieWłaściwości reaktywne Odczyt i zapis Akcje kontra obliczenia Stan pochodny się komponuje Stan z kluczem Asynchroniczność to tylko wartość Stan przejściowy między zdarzeniami Dalej