ページライフサイクル

React と同様に、宜搭のカスタムページもページライフサイクル機能を提供していますが、簡略化されており以下の2つのライフサイクルのみをサポートしています。ユーザーはアクションパネルで対応する JS ロジックを記述し、ページのマウント時またはアンマウント時にいくつかの処理を行うことができます：

• didMount- React の componentDidMount に似ており、ページの最初のレンダリング完了後に呼び出されます；
• willUnmount- React の componentWillUnmount に似ており、ページのアンマウント前に呼び出されます；

使用シナリオ

以下はライフサイクルの具体的な使用方法を示す簡単な例です。アクションパネルでページライフサイクル関数を設定し、以下の操作を実行します：

• ページがマウントされた後、document の resize イベントを監視する；
• onResize メソッドで現在のページの幅をリアルタイムに出力する；
• ページのアンマウント前に document の resize イベント監視を解除する；

関連コードは以下の通りです：

export function didMount() {
  console.log(`「ページ JS」：現在のページアドレス ${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}`);
}

注意事項