ページライフサイクル - DingTalk Help Center

React と同様に、YiDA のカスタムページにもページライフサイクル機能が用意されています。実装はシンプル化されており、以下の 2 つのライフサイクルフックのみをサポートします。アクションパネルに対応する JS ロジックを記述することで、ページのマウント時またはアンマウント時に任意の処理を実行できます。

didMount - React の componentDidMount に相当します。ページの初回レンダリング後に呼び出されます。
willUnmount - React の componentWillUnmount に相当します。ページのアンマウント直前に呼び出されます。

ユースケース

以下の例では、ライフサイクルフックの使用方法を示します。アクションパネルでページライフサイクル関数を設定し、次の処理を実行します。

ページのマウント後に document の resize イベントをリッスン。
onResize メソッドを通じて、現在のページ幅をリアルタイムに出力。
ページのアンマウント前に document の resize イベントリスナーを解除。

関連するコードは以下のとおりです。

export function didMount() {
  console.log(`「Page JS」: Current page URL ${location.href}`);

  window.addEventListener('resize', this.onResize);
}

export function willUnmount() {
  window.removeEventListener('resize', this.onResize);

}

export function onResize() {
  const width = document.documentElement.clientWidth;
  console.log(`current width: ${width}`);
}

備考