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

Question

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

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

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

Спасибо!

Answer 1

Механизм hyperHTML.Component имеет как onconnected , так и onsconnected механизм, как , описанный в документации .

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-узлах, с вами все будет в порядке.