> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ページライフサイクル

> YiDA カスタムページにおける didMount と willUnmount ライフサイクルフックの発火タイミングと典型的なユースケースを解説します。ページのマウント時やアンマウント時に初期化・クリーンアップ処理を実行する方法を紹介します。

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

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

## ユースケース

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

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

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

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
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}`);
}
```

## 備考