Основная проекция
Проекция - это способ передачи содержимого дочернему компоненту, который, в свою очередь, управляет тем, где это содержимое отображается. Проекция - это сотрудничество между родительским и дочерним компонентом. Родительский компонент решает, какой контент должен быть отображён, а дочерний компонент решает, где и нужно ли отображать этот контент.
В нашем примере содержимое элемента <Panel> (внутри <App>) является содержимым, которое необходимо спроецировать. Компонент <Panel> оборачивает содержимое в тег <div> и должен проецировать его с помощью элемента <Slot>.
Почему <Slot>?
Почему Qwik предпочитает использовать свойство <Slot>, а не children? Использование <Slot> - это стратегический выбор, позволяющий отображать компоненты независимо (имеется в виду, что компонент должен иметь возможность повторного рендера, даже если родительский компонент еще не возобновлен). При использовании в Qwik children есть две проблемы:
- Чтобы Qwik мог использовать свойство
childrenдля проекции, оно должно быть сериализуемым, как и все другие значения, передаваемые между компонентами в Qwik. - Дочерний компонент может изменять содержимое
childrenперед вставкой в дерево рендера. Это не позволит родительскому компоненту рендериться независимо от дочернего. Если дочерний компонент будет изменятьchildren, то каждый раз, когда родительский компонент будет изменятьchildren, Qwik должен будет повторно запускать дочерний компонент, чтобы увидеть, какие изменения он вносит вchildren, прежде чем вставить их в дерево рендера.
Для Qwik подход с наименованием <Slot> предпочтительнее, поскольку он декларативно управляет содержимым и расположением проекции. Это позволяет родительскому компоненту изменять содержимое проекции, не заставляя дочерний компонент перерисовываться.
Пример
Измените компонент <Panel>, чтобы спроецировать содержимое <App> с помощью элемента <Slot>.
Обратите внимание, что <App> и <Panel> повторно не рендерятся при нажатии кнопки. Это связано с тем, что график реактивности строится на сервере и сериализуется в HTML, поэтому Qwik знает, что обновить без нужды загружать и ререндерить шаблоны <App> и <Panel>.