检测组件何时为 un/attached 到 DOM

Question

我正在从 React 转向 hyperHTML，因为性能很重要。我正在使用 PhosphorJS 专门用于停靠面板管理的第三方库。当我创建这个 'DockPanel' class 时，我需要将它附加到真正的 DOM 树上。

在 React 中，这可以通过函数 componentDidMount 解决（在虚拟节点附加到 DOM 树后立即调用）。

所以我的问题是，有没有办法检测组件何时为 "mounted" 和 "umounted"？我看到 HyperElement 具有 dis/connectedCallback 功能，但在 hyper.Components 中不起作用。

谢谢！

Answer 1

hyperHTML.Component同时具有onconnected和ondisconnected机制，如described in the documentation.

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 节点，你应该没问题。