Прежде чем мы начнем

В этой статье я расскажу исключительно о пользовательских элементах. Если вы не знаете, что такое пользовательский элемент, ознакомьтесь с Часть 1 этой серии.

Что такое обратный вызов жизненного цикла?

Если вы новичок в мире веб-разработки, возможно, вы раньше не слышали этот термин. Проще говоря, обратные вызовы жизненного цикла — это способ узнать, что происходит с нашим пользовательским элементом в DOM.

- Это еще в DOM? — связалОбратный звонок

- Он был удален из DOM? — отключенОбратный звонок

- Изменилось ли значение атрибута? — атрибутChangedCallback

- Мы в другом ДОМе? — принятОбратный звонок

На эти вопросы мы можем ответить, используя обратные вызовы жизненного цикла.

Как это выглядит в пользовательском элементе?

Чтобы показать это, мы воспользуемся нашим другом компонентом HelloWorld из Части 1.

Все они являются методами класса. Просто как тот. Давайте углубимся в то, что они делают!

соединенныйобратный вызов

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

  • Тег уже находится в HTML при отображении документа.
  • Мы создаем элемент, используя document.createElement(), затем добавляем его в DOM, используя appendChild.
  • Элемент является дочерним компонентом другого элемента, который добавляется в DOM с помощью appendChild.

Это далеко не исчерпывающий список сценариев, но вы поняли идею.

Сравните это с:

отключенныйобратный вызов

Этот метод вызывается каждый раз, когда элемент удаляется из DOM. Вот несколько примеров, когда это может быть вызвано:

  • Удаляем элемент с помощью removeChild
  • Элемент является дочерним компонентом другого элемента, который удаляется из DOM с помощью removeElement.

Опять же, не исчерпывающий список, а несколько примеров.

Сравните это с:

  • React: componentWillUnmount (ПРИМЕЧАНИЕ: в React это вызывается до удаления компонента. Пользовательские элементы после )
  • Вью: destroyed
  • Angular: ngOnDestroy (ПРИМЕЧАНИЕ: аналогично React, это вызывается до удаления компонента. Пользовательские элементы после )

принятОбратный звонок

Это странная утка 🦆. Основной вариант использования, который мне удалось найти для этого сценария, — продвижение элемента из iframe в родительский документ iframe. Элемент не совсем удаляется из DOM, а вместо этого вообще перемещается в новую DOM. Это довольно уникальный случай, и я не могу сказать, что нашел какое-либо реальное применение для этого обратного вызова жизненного цикла.

Насколько я могу судить, в React, Vue или Angular нет эквивалента этому методу.

атрибутChangedCallback

Это самый сложный из обратных вызовов.

Первое, что нужно отметить, это то, что этот метод никогда не будет вызван, если мы не объявим набор атрибутов для наблюдения. Мы выполняем эту задачу, используя метод static getter в классе с именем observedAttributes. Это должно вернуть массив строк с именами атрибутов, которые мы хотим вызвать для метода attributeChangedCallback. Насколько я понимаю, для производительности требуются наблюдаемые атрибуты.

Когда вызывается attributeChangedCallback, мы получаем три части информации:

  • Имя атрибута
  • Старое значение
  • Новое значение

Сигнатура метода:

Сравните это с:

  • Ответ: componentWillReceiveProps ближе всего, но точно не совпадает.
  • Угловой: ngOnChanges

Подведение итогов

Благодаря этим обратным вызовам жизненного цикла у нас теперь есть инструменты, необходимые для создания пользовательских элементов, которые могут понимать свое состояние в dom и реагировать на внешние изменения своих атрибутов! У нас есть строительные блоки, необходимые для создания некоторых основных компонентов, обеспечивающих взаимодействие и обновления.

Первоначально опубликовано на https://terodox.tech/web-components-part-2/