Siklus hidup halaman - DingTalk Help Center

Seperti React, halaman kustom YiDA juga menyediakan kemampuan siklus hidup halaman. Implementasinya disederhanakan dan hanya mendukung dua hook siklus hidup berikut. Tulis logika JS terkait di panel aksi untuk menjalankan tugas saat halaman dimuat atau dibongkar:

didMount - Serupa dengan componentDidMount pada React. Dipanggil setelah halaman dirender untuk pertama kalinya.
willUnmount - Serupa dengan componentWillUnmount pada React. Dipanggil sebelum halaman dibongkar.

Kasus penggunaan

Contoh berikut menunjukkan cara menggunakan hook siklus hidup. Konfigurasikan fungsi siklus hidup halaman di panel aksi untuk melakukan operasi berikut:

Memantau peristiwa resize dokumen setelah halaman dimuat.
Menampilkan lebar halaman saat ini secara real time melalui metode onResize.
Menghapus listener peristiwa resize dokumen sebelum halaman dibongkar.

Kode terkait ditampilkan di bawah ini:

export function didMount() {
  console.log(`「Page JS」: URL halaman saat ini ${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(`lebar saat ini: ${width}`);
}

Catatan