Компоненты фраймворка Qwik

Компоненты являются основными строительными блоками приложений Qwik. Компоненты Qwik уникальны тем, что:

• Компоненты Qwik автоматически разбиваются оптимизатором на фрагменты с ленивой загрузкой.
• Они возобновляемы. (Компонент может быть создан на сервере и продолжать выполняться на клиенте.)
  

Пример кода

Компонент — это небольшой повторно используемый фрагмент кода, который можно использовать для создания пользовательского интерфейса.

В Qwik они объявляются с помощью метода component$:

import { component$, useStore } from '@builder.io/qwik';

interface MyCmpProps {

name: string;

count: number;

}
export const MyCmp = component$((props: MyCmpProps) => {

// Declare local state

const state = useStore({ count: 0, });

// Returns JSX

return ( <>
<span>
Hello, {props.name} {state.count}
</span>
<div>Times: {state.count}</div>
<button onClick$={() => {

// This will update the local state and cause a re-render.

// Reactivity is at Qwik's core!

state.count++;

}}

>
Increment
</button>
</> ); });

Входные параметры компонента - props

props используются для передачи данных в компонент. Свойства объявляются как именованные аргументы компонента.

В этом примере компонент Item объявляет необязательные name, quantity, description и price.

interface ItemProps {

name?: string;

quantity?: number;

description?: string;

price?: number; }

export const Item = component$((props: ItemProps) => {

return ...;

});

Использование компонент

Компоненты Qwik могут использовать другие компоненты.

export const Counter = component$((props: {step?:number, initial?: number}) => { ... });

export const MyApp = component$(() => {

return (

<>
<div>Single: <Counter /></div>
<div>Dozens: <Counter step={12}/></div>
</> ); });

В приведенном выше примере показано, как компонент MyApp может использовать компонент Counter. Второй пример показывает, как можно использовать связывание для передачи значений свойствам компонента Counter.

Отрисовка компонента

Компоненты Qwik являются реактивными на уровне компонентов. Также реактивными являются props, store, proxy, как на чтение, так и на запись.

• Прокси-чтение во время выполнения метода OnRender позволяет Qwik узнать, что метод OnRender зависит от заданного свойства. Чтение создает подписку на это свойство. В нашем примере OnRender считывает {store.count}, что создает подписку, сообщающую Qwik, что всякий раз при изменении store.count компонент должен быть признан недействительным.
• Прокси-запись уведомляет Qwik о том, что все связанные подписки должны быть признаны недействительными.

Когда компоненты становятся недействительными, они добавляются в очередь недействительности, которая сбрасывается (рендерится) при следующем requestAnimationFrame. Это действует как форма объединения для рендеринга компонентов.

Загрузка по требованию

Компонент также играет важную роль при разрыве отношений родитель-потомок в целях объединения.

export const Child = () => <span>child</span>;

const Parent = () => (

<section>
<Child />
</section> );

При создвании одного блока данные, очень важно, чтобы компоненты были атомарны. Поэтмо этот код нужно переписать следующим образом:

export const Child = component$(() => { return <span>child</span>; });
export const Parent = component$(() => { return ( <section>
<Child />
</section> ); });

Оригинал статьи - https://qwik.builder.io/docs/components/overview/