Оптимизатор

Для того чтобы приложение было возобновляемым, оно должно иметь много точек входа. Например, клик по кнопке A является одной точкой входа, а клик по кнопке B - другой. Когда мы реализуем приложение, мы обычно не думаем о точках входа, и поэтому обычно у нас есть только одна точка входа, или функция - main().

Оптимизатор выполняет свою работу находя функции, оканчивающиеся символом $. Например, оптимизатор преобразует вызов component$() в точку входа. Обратите внимание, что имя функции не имеет значения, главное, что она заканчивается символом $.

Каждый раз, когда вы видите $, вы должны понимать, что здесь граница ленивой загрузки. Подразумевается, что содержимое требует ленивую загрузки и, следовательно, не может быть доступно синхронно.

Хотя оптимизатор может сериализовать любые данные, которые может сериализовать Qwik, для замыканий он делает специальную обработку. Замыкания - это функции, которые создаются внутри других функций и могут захватывать переменные в лексической области видимости. Возможность сериализации замыканий является ключевым свойством, которое делает Qwik возобновляемым. Без сериализации замыканий было бы трудно иметь возобновляемые приложения.

Пример

Обратите внимание, что в примере у нас есть два лениво-загружаемых фрагмента, так как в нашем коде есть два символа $.

Откройте вкладку Symbols и посмотрите, как оптимизатор превратил функцию onClick$ в точку входа. В частности, обратите внимание, что точка входа onClick$ не импортирует модуль @builder.io/qwik.

Теперь измените обратный вызов onClick$ на store.count++.

Снова откройте вкладку Symbols, и вы увидите, что на этот раз оптимизатор импортировал @builder.io/qwik и вставил вызов useLexicalScope() для восстановления захваченного состояния обработчика события. Восстановление захваченного состояния функции - это то, что делает Qwik возобновляемым.

Edit Tutorial