Стан і реактивність

Стан $mol поводиться як електронна таблиця: ви оголошуєте, як обчислюється значення, і все, що від нього залежить, оновлюється саме. Ніяких сховищ, ніякого dispatch, ніяких хуків ефектів — граф залежностей відстежує, що переобчислити.

Реактивні властивості

Метод, оздоблений @ $mol_mem, — це кешована реактивна комірка. Вона виконується один раз, запам'ятовує свій результат і переобчислюється лише тоді, коли змінилося щось, що вона прочитала.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 читає count, тож автоматично підписується на count. Змініть count — і кожне подання, що показує doubled, оновиться: підписуватися вручну не потрібно.

Читання і запис

Властивість є водночас гетером і сетером: викличте її без аргументу, щоб прочитати, з аргументом — щоб записати.1@ $mol_action2increment() {3 this.count( this.count() + 1 )4}

Дії проти обчислень

Ця єдина відмінність робить реактивний код передбачуваним:@ $mol_mem — це чисте обчислення: лише читає інші комірки й повертає значення.@ $mol_action — це ефект: записи в стан, мережеві виклики й таймери належать сюди.Запис у комірку зсередини @ $mol_mem створює петлю зворотного зв'язку (запис знецінює залежність, яка переобчислюється й знову записує). $mol повідомляє про це як про циклічну підписку. Виправлення завжди одне: тримайте побічні ефекти в діях, а обчислення — чистими.У @ $mol_mem можнаале не можнаОбробники кнопок генеруються як @ $mol_mem у базовому класі; перевизначте їх через @ $mol_action, щоб вони могли безпечно записувати:1@ $mol_action2submit() {3 this.saved( true )4}

Похідний стан компонується

Оскільки залежності відстежуються автоматично, похідні значення зчіплюються без жодного ручного з'єднання. Кожне читає попереднє; зміна в корені поширюється рівно настільки далеко, наскільки потрібно: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}Редагувати цю сторінку на GitHubЦе було корисно?ТакНіНазадВиди ДаліМаршрутизаціяНа цій сторінціРеактивні властивості Читання і запис Дії проти обчислень Похідний стан компонується Стан із ключем Асинхронність — це просто значення Тимчасовий стан між подіями Далі