Angular Academy · Pelajaran

Pipe Tulen berbanding Tidak Tulen

Fahami tingkah laku pengesanan perubahan pipe.

Pelajaran 4 daripada 413 langkah

Pipe Tulen berbanding Tidak Tulen ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Pipe Tulen Secara Lalai

Setiap pipe adalah tulen secara lalai. Pipe tulen hanya dijalankan semula apabila nilai input atau argumennya berubah mengikut rujukan.

Mengapa Pipe Tulen Pantas

Angular tidak memanggil pipe tulen semasa pengesanan perubahan jika rujukan input tidak berubah. Ini menjadikan pipe tulen cekap.

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

Perubahan Rujukan berbanding Nilai

Pipe tulen mengesan perubahan rujukan. Mengubah suai tatasusunan di tempatnya TIDAK mencetuskan pipe tulen kerana rujukan tatasusunan itu kekal sama.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Mengisytiharkan Pipe Tidak Tulen

Tetapkan pure: false dalam penghias @Pipe untuk menjadikan pipe tidak tulen. Pipe tidak tulen dijalankan pada setiap kitaran pengesanan perubahan.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

Bila Hendak Menggunakan Pipe Tidak Tulen

Gunakan pipe tidak tulen apabila transformasi bergantung pada data yang boleh diubah, seperti menapis tatasusunan yang anda ubah di tempatnya, atau pada nilai yang berubah tanpa rujukan baharu.

Kos Pipe Tidak Tulen

Pipe tidak tulen dijalankan dengan sangat kerap, pada setiap kitaran pengesanan perubahan. Logik berat di dalamnya boleh menjejaskan prestasi, jadi pastikan logiknya ringan.

Pipe async ialah Tidak Tulen

Pipe terbina dalam async ialah pipe tidak tulen. Ia melanggan Observable atau Promise dan mengemas kini paparan apabila nilai baharu tiba.

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

Pipe async Berhenti Melanggan Secara Automatik

Kelebihan besar pipe async ialah ia berhenti melanggan secara automatik apabila komponen dimusnahkan, sekali gus mencegah kebocoran memori.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Elakkan Pengubahan dengan Pipe Tulen

Untuk memastikan pipe tulen berfungsi dengan koleksi, anggap data sebagai tidak boleh ubah: cipta tatasusunan dan objek baharu dan bukannya mengubah yang sedia ada.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Memilih Tulen berbanding Tidak Tulen

Utamakan pipe tulen untuk tingkah laku yang pantas dan mudah dijangka. Gunakan pipe tidak tulen hanya apabila anda benar-benar perlu bertindak balas terhadap pengubahan. Selalunya, reka bentuk semula dengan data yang tidak boleh ubah dapat mengelakkan pipe tidak tulen sepenuhnya.

Amalan Terbaik Pipe Tidak Tulen

Jika anda mesti menggunakan pipe tidak tulen, simpan hasil dalam memo supaya anda tidak mengira semula apabila input tidak berubah.

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

Semakan Ringkas

Uji pemahaman anda tentang pipe tulen dan tidak tulen.

Jawab dalam pelajaran interaktif

Imbas Kembali

Pipe tulen hanya dijalankan apabila rujukan berubah dan ia pantas; pipe tidak tulen (pure: false) dijalankan pada setiap kitaran dan sesuai untuk data yang boleh diubah. Pipe async ialah pipe tidak tulen dan berhenti melanggan secara automatik.

Utamakan data yang tidak boleh ubah supaya pipe tulen kekal cekap.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pipe Tulen berbanding Tidak Tulen” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Pipe Tulen berbanding Tidak Tulen”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pipe Tulen berbanding Tidak Tulen”?

Fahami tingkah laku pengesanan perubahan pipe. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pipe Tulen berbanding Tidak Tulen” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy