Базовые методы жизненного цикла

Stimulus организует взаимодействие с DOM через контроллеры, которые автоматически привязываются к элементам с атрибутами data-controller. Контроллеры создаются как классы JavaScript, наследуемые от Stimulus.Controller. При загрузке страницы или динамическом добавлении элементов фреймворк автоматически инициализирует контроллер, связывая его с элементами DOM.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Контроллер подключен")
  }
}

Атрибут data-controller="example" на элементе связывает его с классом контроллера ExampleController. Методы жизненного цикла вызываются автоматически в определенные моменты существования контроллера.

Методы жизненного цикла

Stimulus предоставляет несколько ключевых методов жизненного цикла:

connect()

Метод вызывается один раз при привязке контроллера к DOM-элементу. Используется для инициализации состояния, привязки событий и настройки начального состояния интерфейса.

Особенности:

  • Вызывается после того, как элемент полностью подключен к DOM.
  • Можно безопасно обращаться к DOM-элементам и выполнять манипуляции с их содержимым.
  • Часто используется для добавления обработчиков событий через addEventListener.

Пример:

connect() {
  this.element.textContent = "Контроллер активен"
}

disconnect()

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

Пример:

disconnect() {
  console.log("Контроллер отключен")
}

Особенности:

  • Отключение может происходить как вручную, так и автоматически при удалении элемента.
  • Все обработчики событий, добавленные в connect, желательно удалять здесь.

initialize()

Метод вызывается перед connect(), сразу после создания экземпляра контроллера, но до его привязки к DOM. Используется для подготовки начальных данных и внутреннего состояния контроллера.

Пример:

initialize() {
  this.counter = 0
}

Особенности:

  • Нет доступа к DOM-элементу через this.element, так как он еще не подключен.
  • Подходит для создания внутренних свойств и структур данных.

Отслеживание изменений данных с помощью targets

Stimulus позволяет объявлять цели (targets) в контроллере через атрибут data-target. Методы жизненного цикла часто используют их для работы с определенными элементами внутри контроллера.

<div data-controller="counter">
  <span data-counter-target="output">0</span>
  <button data-action="click->counter#increment">Увеличить</button>
</div>
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = "0"
  }

  increment() {
    this.outputTarget.textContent = parseInt(this.outputTarget.textContent) + 1
  }
}

Использование targets делает код чистым, легко поддерживаемым и избавляет от необходимости вручную искать элементы через querySelector.

Обработка событий с actions

Stimulus связывает события с методами контроллера через атрибут data-action. Жизненный цикл контроллера гарантирует, что методы доступны в момент срабатывания событий после connect().

<button data-controller="alert" data-action="click->alert#show">Нажми меня</button>
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  show() {
    alert("Событие обработано!")
  }
}

Особенности:

  • Метод show вызывается только тогда, когда контроллер подключен.
  • При отключении контроллера события перестают срабатывать.

Повторная инициализация и динамический DOM

Stimulus автоматически отслеживает добавление элементов в DOM. Методы initialize и connect вызываются для каждого нового элемента, соответствующего data-controller. Это позволяет динамически подгружать компоненты без переписывания логики.

Пример динамического добавления:

const newElement = document.createElement("div")
newElement.setAttribute("data-controller", "counter")
document.body.appendChild(newElement)

При добавлении newElement Stimulus создаст новый экземпляр CounterController и вызовет initialize() и connect().

Практические рекомендации по жизненному циклу

  • Инициализация состояния: использовать initialize для внутренних свойств, connect для работы с DOM.
  • Очистка ресурсов: все подписки, таймеры и слушатели удалять в disconnect.
  • Минимизация побочных эффектов: методы жизненного цикла должны быть максимально изолированными и предсказуемыми.
  • Использование targets и actions: позволяет делать код декларативным и легко читаемым.

Методы жизненного цикла являются фундаментом для построения стабильных, динамичных и легко расширяемых компонентов в Stimulus. Их правильное использование обеспечивает надежную работу интерфейсов без лишней сложности и утечек ресурсов.

Оглавление