时间戳

首页 > 解决方案 > 检测组件何时取消/附加到 DOM

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

问题描述

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

在React这可以用函数解决componentDidMount虚拟节点连接到 DOM 树后立即调用）。

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

谢谢！

标签： typescriptdomvirtual-domhyperhtml

解决方案

如文档中所述，hyperHTML.Component具有onconnected和ondisconnected机制。

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

推荐阅读