Hidup tanpa \'kait kitaran hayat\'

Hampir setiap perpustakaan UI JavaScript &/| rangka kerja yang saya lihat mempunyai beberapa jenis cangkuk kitaran hayat: onmount, willmount, beforemount, aftermount, onunmount, on whatever.

Adakah anda benar-benar memerlukannya? Adakah mereka baik atau buruk? Adakah mungkin untuk hidup tanpa?

Jadi, mengapa ini wujud, pada mulanya?

  const oninit = (e: Element) => {
    e.style.prop = value;
    e.addEventListener('mouseover', handler);
    e.setAttribute('data-key', value);
  }

Ini adalah pelat dandang permulaan (membosankan) yang biasa digunakan oleh banyak komponen untuk web. Sifat deklaratif HTML dan CSS bertujuan untuk menjadikan ini berlebihan, kecuali kadangkala sukar jika tidak mustahil untuk menetapkan beberapa fungsi dengan nilai yang dimaksudkan (fikirkan disabled="${()=>false}" yang tidak hanya berkelakuan seperti yang diharapkan).

Jadi apa yang kita lakukan? Tetapkan secara penting apa sahaja yang kita tinggalkan dalam pengendali init. Ia berfungsi dan dunia boleh bergerak ke hadapan.

Namun, terdapat isu penting dengan pendekatan ke. Jika berlaku masalah, sukar untuk menjamin pendengar acara dan perkara lain dibersihkan dengan betul. Rangka kerja yang diberikan sudah tentu boleh mendedahkan mana-mana cangkuk onunmount, tetapi jika terdapat ralat dalam logik aplikasi maka anda mempunyai pepijat, atau yang paling teruk, kebocoran memori.

Pengaturcaraan imperatif ialah paradigma pengaturcaraan yang malang yang terdedah sepenuhnya kepada situasi ini. Anda boleh melakukan hampir semua perkara, termasuk memecahkan barangan.

Penyelesaian itu disertakan dengan Penyongsangan Kawalan dan Pengaturcaraan Fungsian, yang tidak berlaku seperti bagaimana HTML dan JavaScript telah dibayangkan, tetapi ada berita baik: kami masih boleh melaksanakan beberapa corak reka bentuk asas FP dan menyediakan penyelesaian strategik kepada masalah tersebut.

rimmel.js ialah pelaksanaan rujukan daripada superset konseptual HTML yang dipanggil Reactive Markup, yang berfungsi sedikit seperti TypeScript untuk JavaScript, tetapi ia bertujuan untuk menjadikan HTML dan DOM berfungsi/fungsi-reaktif.

Ini dicapai dengan menganggap segala-galanya sebagai aliran: gaya? Ia adalah aliran. acara DOM? Sudah tentu mereka adalah aliran. Atribut HTML? Aliran juga. Setiap kali mereka mengeluarkan nilai, itu ditetapkan.

Mari kita lihat cara ia berfungsi.

  const style = CreateStream({color: 'red'});
  const key = CreateStream('red', value);
  const handler = CreateStream();

  const template = rml`
    <div style="${style}" data-key="${key}" onmouseover="${handler}">
    </div>
  `;

CreateStream hanyalah utiliti penciptaan aliran hipotesis. Biasanya anda ingin menggunakan Promises, Observables RxJS menstrim lebih umum sebaliknya, kerana ia memodelkan interaksi UI terbaik.

Jika anda menyemak kod itu sekali lagi, anda akan sedar tidak lama lagi tiada panggilan onmount. Sebenarnya, ia tidak diperlukan kerana setiap operasi panggilan balik onmount yang dilakukan lebih awal, kini akan dilakukan sebaik sahaja strim tersebut memancarkan.

Mana-mana rangka kerja atau pustaka UI yang diberikan akan bertanggungjawab menyahlekap setiap strim yang ditakrifkan atau terikat dalam templat: gaya, kekunci data, pada tetikus. Tiada risiko anda terlupa untuk membersihkan dan peluang untuk mencipta kebocoran memori berkurangan dengan ketara.

Jika anda baru dalam pengaturcaraan berfungsi, anda mungkin akan meluangkan sedikit masa untuk memahami cara merumuskan semula masalah anda dari segi strim, tetapi apabila anda berjaya melakukannya, terdapat banyak lagi faedah yang menanti anda sebagai pertukaran, seperti pengurangan secara mendadak. saiz kod (50% hingga 90% kurang kod), lebih boleh diuji dan kurang logik dan pelaksanaan yang terdedah kepada ralat.

Bersedia untuk sedikit pengalaman eksotik? Lihat rimmel.js

Atas ialah kandungan terperinci Hidup tanpa \'kait kitaran hayat\'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!