Методы и публичный API

Stencil предоставляет ряд встроенных методов и инструментов для работы с компонентами и их жизненным циклом. Знание этих методов важно для эффективной работы с фреймворком, поскольку они позволяют максимально гибко управлять поведением компонентов. В этой части статьи рассмотрены основные методы и публичный API, доступные в Stencil, которые позволяют создавать динамичные и оптимизированные веб-приложения.

Жизненный цикл компонента

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

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

componentWillLoad() Вызывается перед загрузкой компонента, до рендера. Это хорошее место для асинхронных операций, таких как получение данных с сервера или подготовка состояния компонента.
componentDidLoad() Вызывается после того, как компонент был загружен и отрендерен. Это позволяет проводить операции, требующие доступ к DOM-элементам компонента.
componentWillUpdate() Вызывается перед обновлением компонента, то есть перед тем, как его состояние или свойства изменятся.
componentDidUpdate() Этот метод срабатывает после обновления компонента. Здесь можно выполнить дополнительные действия, например, обновить внешний вид компонента или выполнить дополнительные вычисления.
componentWillUnload() Метод вызывается перед удалением компонента из DOM. Это место для освобождения ресурсов, очистки подписок и других действий, требующих завершающей очистки.
render() Основной метод рендера компонента. Он используется для возвращения JSX-разметки, которая будет отрисована в браузере. Рендеринг компонента в Stencil автоматический, однако этот метод можно переопределить для кастомной логики.

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

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

Методы для работы с событиями:

@Event() Декоратор @Event() используется для создания и отправки кастомных событий. Это позволяет компонентам взаимодействовать друг с другом. Например:
```
@Event() myEvent: EventEmitter;

someMethod() {
  this.myEvent.emit({ data: 'example' });
}
```
@Listen() Декоратор @Listen() используется для прослушивания событий, как обычных, так и кастомных. Это позволяет компонентам подписываться на события, отправляемые другими частями приложения. Например:
```
@Listen('myEvent')
handleMyEvent(event: CustomEvent) {
  console.log(event.detail);
}
```

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

Stencil использует свойства компонента для конфигурации его поведения и отображения. Эти свойства можно объявлять с помощью декоратора @Prop(), и они автоматически становятся реактивными.

Основные методы и особенности работы с пропсами:

@Prop() Декоратор @Prop() используется для объявления входных свойств компонента. Все свойства, помеченные этим декоратором, автоматически становятся реактивными, и компонент будет повторно рендериться при их изменении.
```
@Prop() name: string;
```
@Watch() Декоратор @Watch() позволяет следить за изменениями значения свойства. Это удобно для реакции на изменения данных и выполнения каких-либо действий, например, обновления интерфейса.
```
@Watch('name')
onNameChange(newValue: string) {
  console.log(`Имя изменено на: ${newValue}`);
}
```

Управление состоянием

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

Методы и особенности работы с состоянием:

@State() Декоратор @State() используется для объявления внутреннего состояния компонента. Когда состояние изменяется, Stencil автоматически рендерит компонент заново, если это необходимо.
```
@State() isVisible: boolean = true;
```
setState() Метод setState() используется для изменения значения состояния компонента. Этот метод полезен в случае, когда нужно синхронно обновить состояние и затем вызвать перерендер компонента.
```
this.setState({ isVisible: false });
```

Обработчики запросов и асинхронные действия

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

Работа с асинхронными операциями:

Асинхронные методы в жизненном цикле Например, в методе componentWillLoad() можно выполнить асинхронную операцию, такую как запрос данных с сервера.
```
async componentWillLoad() {
  const data = await fetchData();
  this.data = data;
}
```
@Method() Декоратор @Method() позволяет объявить публичные методы компонента, которые могут быть вызваны извне. Это удобно для взаимодействия с компонентом из других частей приложения.
```
@Method()
async fetchData() {
  const response = await fetch('/api/data');
  return await response.json();
}
```

Работа с рефами

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

Основные методы работы с рефами:

@Element() Декоратор @Element() предоставляет доступ к самому элементу компонента в DOM. Это полезно, когда необходимо напрямую манипулировать элементами компонента.
```
@Element() el: HTMLElement;
```
@Method() Декоратор @Method() можно использовать для создания методов, которые могут быть вызваны снаружи. Например, чтобы получить доступ к элементам DOM внутри компонента.

Прочие полезные методы

forceUpdate() Метод forceUpdate() принудительно вызывает перерендер компонента, независимо от того, были ли изменения в его состоянии или пропсах. Это может быть полезно в ситуациях, когда необходимо вручную инициировать обновление компонента.
```
this.forceUpdate();
```
register() и unregister() Методы для регистрации и удаления событий и обработчиков, которые могут быть полезны при динамическом добавлении или удалении компонентов из интерфейса.
```
this.registerEventListener('resize', this.onResize);
this.unregisterEventListener('resize', this.onResize);
```

Stencil предоставляет мощный и гибкий API для создания современных веб-компонентов. Понимание методов и работы с публичным API позволяет значительно ускорить разработку и улучшить взаимодействие между компонентами в приложении.