检测组件何时取消/附加到DOM

Question

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

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

所以我的问题是，有没有办法检测组件何时“挂载”和“已安装”？我看到HyperElement有dis/connectedCallback功能，但在hyper.Components不起作用。

谢谢！

Answer 1

hyperHTML.Component既有连接也有连接机制，就像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节点你应该没问题。