Определить, когда компонент отключен / подключен к DOM

Question

Я перехожу с React на hyperHTML, потому что производительность имеет значение. Я использую сторонние библиотеки специально для управления док-панелями от PhosphorJS. Когда я создаю этот класс 'DockPanel', мне нужно присоединить его к реальному дереву DOM.

В React это можно решить с помощью функции componentDidMount (вызывается сразу после присоединения виртуальных узлов к дереву DOM).

Итак, мой вопрос: есть ли способ определить, когда компонент "смонтирован" и "размонтирован"? я видел это HyperElement имеет dis/connectedCallback функция, но в hyper.Components не работает

Спасибо!

Answer 1

hyperHTML.Component имеет как подключенный, так и отключенный механизм, как описано в документации.

class Clock extends hyper.Component {
  get defaultState() { return {date: new Date()}; }
  onconnected() {
    console.log('finally live');
  }
  render() {
    return this.html`
      <div onconnected=${this} >
        <h1>Hello, world!</h1>
        <h2>It is ${
          this.state.date.toLocaleTimeString()
        }.</h2>
      </div>`;
  }
}

Я не знаком с PhosphorJS (впервые слышу об этом), но если он основан на обычных DOM-узлах, у вас все будет хорошо.