Шаблон — неявная реактивность
Этот пример демонстрирует как изменения состояний хранилищ автоматически обновляют своих подписчиков.
Во время SSR-рендера серверу необходимо отрисовать все компоненты приложения. В процессе рендера привязки в этих компонентах выполняют чтение свойств хранилища. Например, когда текстовый узел в <DisplayA>
считывает свойство countA
из хранилища, Qwik записывает это как подписку. Например, когда <DisplayA>
считывает свойство countA
из хранилища, Qwik записывает это как подписку. Qwik теперь знает, что если countA
изменится, текстовый узел в <DisplayA>
должен быть перерендерен. Выполнение сигнальных операций автоматически настроит подписки в хранилище. Каждый раз, когда выполняются сигнальные операции, старые подписки сбрасываются и создаются новые подписки. Это означает, что текстовый узел может изменять набор событий, которые он прослушивает, в течение своего жизненного цикла.
Сейчас кнопки не работают. Внесите в них исправления для увеличения соответствующих свойств хранилища.
Когда вы заставите кнопки работать, обратите внимание, что несмотря на то, что всё состояние хранится в одном хранилище, обновления проходят фокусно. Кнопка a++
будет вызывать только ререндер текстового узла внутри компонента <DisplayA>
, а кнопка b++
- только ререндер текстового узла внутри компонента <DisplayB>
. Фрагментарный рендер - важное свойство Qwik. Именно это позволяет приложениям Qwik оставаться компактными и не загружать слишком много кода без необходимости.
Подписки автоматически создаются и сбрасываются при удалении компонента. Нет необходимости следить за ними и удалять их вручную.
Qwik - это реактивная система. Все реактивные системы требуют однократного полного выполнения приложения для создания подписок. Приложения Qwik также требуют полного выполнения для настройки всех подписок. Однако приложения Qwik выполняют все действия на сервере и передают информацию о подписке клиенту. Таким образом, клиент знает, какой компонент или часть компонента необходимо повторно рендерить, и при этом ему не приходится выполнять полный рендер всего приложения. Это заставило бы все компоненты загружаться сразу, а Qwik этого избегает.
Edit Tutorial