Захват лексической области
В этом примере мы рассмотрим, как Qwik сериализует состояние компонента. Прямой подход заключается в том, что Qwik просто сохраняет всё состояние, связанное с useStore(). Qwik более разумно подходит к этому вопросу и старается вытряхнуть из дерева те хранилища, которые не нужны клиенту.
Пример состоит из:
<App/>: который создаёт хранилище;- Хранилище содержит свойство
largeData. Предположим, что это большой набор данных, который нужен только на сервере. Примером может служить приложение HackerNews. Сервер должен получить новостные статьи из JSON API, а затем использовать эти данные для их визуализации. Статьи доступны пользователю только для чтения, поэтому HTML-ответ никогда не будет повторно рендериться на клиенте. По этой причине предпочтительнее не отправлять клиенту данные. - Кнопка, обновляющая несвязанные данные.
Посмотрите на вкладку HTML и обратите внимание, что largeData сериализована в <script type="qwik/json">. Это ни к чему, поскольку мы отправляем клиенту данные, которые никогда не изменятся и не будут использованы для повторного рендера. Ваша цель в этом упражнении - исправить этот момент.
Почему largeData сериализуется
Процесс сериализации Qwik начинается с использования всех слушателей в качестве корней сериализации. В нашем случае, onClick$ на <button> используется в качестве корня сериализации. Обратите внимание, что замыкание onClick$ охватывает store. Тот факт, что onClick$ охватывает store, не оставляет Qwik другого выбора, кроме как сериализовать store и, вместе с ним, все дочерние свойства.
Чтобы исправить это, измените замыкание onClick$ с store.counter.count++ на counter.count++ (мы уже создали для вас локальную ссылку на counter). Это изменение приводит к тому, что захватывается замыкание onClick$. Захват более конкретных ссылок позволяет Qwik устранить необходимость в сериализации свойства largeData.
Откройте вкладку HTML и обратите внимание, что Qwik больше не сериализует largeData.