Основы JSX в Stencil

JSX в Stencil представляет собой синтаксический сахар, который позволяет описывать структуру компонентов с использованием разметки, напоминающей HTML, но с возможностью интеграции JavaScript-логики непосредственно внутри разметки. Это мощный инструмент, который значительно упрощает разработку компонентов, делая код более читаемым и удобным для работы. В Stencil JSX используется для описания интерфейсов компонентов и работы с виртуальным DOM.

JSX синтаксис в Stencil практически идентичен синтаксису JSX в других фреймворках, таких как React, но с некоторыми особенностями, специфичными для Stencil.

  1. Элементы и компоненты JSX в Stencil позволяет использовать как стандартные HTML-элементы, так и пользовательские компоненты. При этом пользовательские компоненты записываются с использованием PascalCase, в отличие от обычных HTML-элементов, которые используют kebab-case.

    <my-component></my-component>
<div>Hello, World!</div>

  2. Вставка JavaScript-выражений Внутри JSX можно вставлять выражения JavaScript, заключая их в фигурные скобки {}. Это позволяет динамически изменять содержимое компонентов на основе состояния или других данных.

    const name = 'Stencil';
<div>Hello, {name}!</div>

  3. Условный рендеринг JSX в Stencil поддерживает условный рендеринг, который можно реализовать с помощью тернарных операторов или условных операторов внутри JSX-разметки.

    const isLoggedIn = true;
<div>{isLoggedIn ? 'Welcome back!' : 'Please log in'}</div>

  4. Циклический рендеринг В Stencil для итерации по массивам можно использовать стандартный JavaScript-метод .map(), вставляя его результат прямо в JSX.

    const items = ['Apple', 'Banana', 'Cherry'];
<ul>
  {items.map(item => <li>{item}</li>)}
</ul>

Работа с аттрибутами

JSX в Stencil позволяет передавать аттрибуты в компоненты, причем имена аттрибутов пишутся в camelCase стиле, в отличие от стандартных HTML-аттрибутов, которые используют kebab-case.

  1. Стандартные аттрибуты

    Аттрибуты в JSX работают как и в HTML, но важно помнить, что значения аттрибутов можно передавать как строки или JavaScript-выражения.

    <button disabled={isDisabled}>Click Me</button>

  2. Собственные аттрибуты

    Пользовательские аттрибуты, такие как prop в компонентах Stencil, также передаются в camelCase стиле.

    <my-component someProp={value}></my-component>

Стилизация компонентов

Stencils позволяет внедрять стили прямо в JSX-разметку, что делает компоненты полностью изолированными и самодостаточными.

  1. Встроенные стили Для стилизации компонента в Stencil используется тег <style>, который может быть расположен внутри компонента, чтобы стили касались только этого компонента, благодаря использованию Shadow DOM.

    @Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  render() {
    return (
      <div>
        <style>
          {`
            div {
              background-color: lightblue;
            }
          `}
        </style>
        <p>Hello, world!</p>
      </div>
    );
  }
}

  2. Использование CSS-переменных

    В Stencil можно использовать CSS-переменные, что позволяет легко настраивать стили компонента в зависимости от контекста.

    <div style={{ '--background-color': 'lightblue' }}>
  <p>Styled with CSS variables!</p>
</div>

Применение событий

JSX в Stencil позволяет работать с событиями в стиле стандартного JavaScript. Однако Stencil добавляет дополнительные возможности для управления событиями и их распространением через компоненты.

  1. Обработка событий

    В JSX можно использовать стандартный синтаксис для привязки событий. Для этого аттрибут события (например, onClick, onChange) указывается с именем в camelCase.

    <button onCl ick={this.handleClick}>Click Me</button>

    Метод handleClick будет вызван, когда пользователь нажмёт на кнопку.

  2. Слушатели событий в компонентах

    Stencil позволяет добавлять кастомные события, которые могут быть подписаны другими компонентами. Для этого используется декоратор @Event(), который позволяет создать пользовательские события с динамическими данными.

    @Event() myCustomEvent: EventEmitter;

handleClick() {
  this.myCustomEvent.emit({ message: 'Hello from Stencil!' });
}

Структура компонента и render-метод

Компоненты в Stencil являются основным строительным блоком приложения. Каждый компонент должен содержать метод render(), который возвращает JSX-разметку. Этот метод автоматически вызывается при изменении состояния компонента и при необходимости обновления DOM.

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  render() {
    return (
      <div>
        <p>Component rendered!</p>
      </div>
    );
  }
}

Важной особенностью является использование Shadow DOM, который помогает изолировать стили и логику компонента от остальной части приложения. Это улучшает поддержку многократного использования компонентов и их повторное применение без риска конфликтов стилей.

Виртуальный DOM и оптимизация

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

JSX и виртуальный DOM в Stencil позволяют работать с компонентами на высоком уровне абстракции, не беспокоясь о манипуляциях с DOM напрямую.

Поддержка TypeScript

JSX в Stencil работает с TypeScript, что позволяет использовать все преимущества типизации, автодополнения и интеграции с редакторами кода, такими как VS Code. Это помогает избежать ошибок в коде и значительно улучшает процесс разработки. Также Stencil поддерживает декораторы, которые используются для описания метаданных компонента, таких как @Component, @State, @Prop, и другие.

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
})
export class MyComponent {
  @Prop() name: string;
  @State() counter: number = 0;

  handleClick() {
    this.counter++;
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.name}!</h1>
        <p>Counter: {this.counter}</p>
        <button onCl ick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

TypeScript в сочетании с JSX в Stencil позволяет создавать более надежные и масштабируемые компоненты, благодаря строгой типизации и поддержке современных JavaScript-функций.

Итоги

JSX в Stencil — это мощный и гибкий инструмент для создания компонентов, который сочетает в себе простоту работы с разметкой и мощные возможности JavaScript. Он позволяет разрабатывать компоненты с удобной и понятной разметкой, а также использовать динамические данные и методы для построения интерфейсов. Взаимодействие с виртуальным DOM, поддержка TypeScript и изоляция компонентов через Shadow DOM делают Stencil идеальным выбором для создания современных веб-приложений.

Оглавление