smalljs$molПоиск⌘ KДокументацияПесочницаСравнениеЭкосистемаО проектеRU
Состояние и реактивностьGetting StartedВведениеМентальная модельБыстрый стартОт TypeScript к view.treeСтруктура проектаИнструментарийEssentialsУстановкаВьюСостояние и реактивностьРоутингРендерингТестированиеДеплойРешение проблемDataЗагрузка данныхСхемы данныхГипер БазаMoreВитринаИз React, Vue и SvelteСборник рецептовAdvancedПлагиныМетаданные модуляОфлайнGhost-вьюAboutЧастые вопросыКомандаРелизыAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Состояние и реактивность

Состояние в $mol ведёт себя как электронная таблица: вы объявляете, как вычисляется значение, и всё, что от него зависит, обновляется само. Ни сторов, ни диспатчей, ни хуков-эффектов — граф зависимостей сам отслеживает, что пересчитывать.

Реактивные свойства

Метод, помеченный @ $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Было полезно?ДаНетНазадВьюВперёдРоутинг
На этой страницеРеактивные свойстваЧтение и записьДействия против вычисленийПроизводное состояние композируетсяКлючевое состояниеАсинхронность — это просто значениеВременное состояние между событиямиДальше
Type to search the documentation.