Pipe Pure vs Impure
Pahami perilaku deteksi perubahan pada pipe.
Pipe Pure vs Impure adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Pipe Murni Secara Bawaan
Setiap pipe bersifat murni secara bawaan. Pipe murni hanya dijalankan ulang ketika nilai masukan atau argumennya berubah berdasarkan referensi.
Mengapa Pipe Murni Cepat
Angular tidak memanggil pipe murni selama deteksi perubahan jika referensi masukan tidak berubah. Hal ini membuat pipe murni efisien.
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changesPerubahan Referensi vs Nilai
Pipe murni mendeteksi perubahan referensi. Mengubah array secara langsung TIDAK memicu pipe murni karena referensi array tetap sama.
// this will NOT re-run a pure pipe:
this.items.push("new");
// this WILL, new reference:
this.items = [...this.items, "new"];Mendeklarasikan Pipe Tidak Murni
Atur pure: false dalam dekorator @Pipe untuk menjadikan pipe tidak murni. Pipe tidak murni dijalankan pada setiap siklus deteksi 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));
}
}Kapan Menggunakan Pipe Tidak Murni
Gunakan pipe tidak murni ketika transformasi bergantung pada data yang dapat berubah, seperti memfilter array yang Anda ubah secara langsung, atau pada nilai yang berubah tanpa referensi baru.
Biaya Pipe Tidak Murni
Pipe tidak murni dijalankan sangat sering, yaitu pada setiap siklus deteksi perubahan. Logika yang berat di dalamnya dapat menurunkan kinerja, jadi buatlah tetap ringan.
Pipe async Bersifat Tidak Murni
Pipe bawaan async bersifat tidak murni. Pipe ini berlangganan ke Observable atau Promise dan memperbarui tampilan saat nilai baru tiba.
<p>{{ data$ | async }}</p>
// component
data$ = this.http.get("/api/data");Pipe async Berhenti Berlangganan Otomatis
Manfaat besar pipe async adalah berhenti berlangganan secara otomatis ketika komponen dihancurkan, sehingga mencegah kebocoran memori.
@Component({
template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
count$ = interval(1000);
}Hindari Mutasi dengan Pipe Murni
Agar pipe murni dapat bekerja dengan koleksi, perlakukan data sebagai tidak dapat diubah: buat array dan objek baru, bukan mengubah yang sudah ada.
// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };Memilih Pipe Murni atau Tidak Murni
Utamakan pipe murni untuk perilaku yang cepat dan mudah diprediksi. Gunakan pipe tidak murni hanya jika Anda benar-benar perlu merespons mutasi. Sering kali, perancangan ulang dengan data yang tidak dapat diubah dapat menghindari pipe tidak murni sepenuhnya.
Praktik Terbaik Pipe Tidak Murni
Jika Anda harus menggunakan pipe tidak murni, simpan hasilnya dalam memo agar tidak menghitung ulang ketika masukannya 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;
}
}Pemeriksaan Singkat
Uji pemahaman Anda tentang pipe murni dan tidak murni.
Ringkasan
Pipe murni hanya dijalankan saat referensi berubah dan memiliki kinerja cepat; pipe tidak murni (pure: false) dijalankan pada setiap siklus dan cocok untuk data yang dapat berubah. Pipe async bersifat tidak murni dan berhenti berlangganan secara otomatis.
Utamakan data yang tidak dapat diubah agar pipe murni tetap efisien.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pipe Pure vs Impure” gratis?
Ya — teks lengkap “Pipe Pure vs Impure” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pipe Pure vs Impure”?
Pahami perilaku deteksi perubahan pada pipe. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Pipe Pure vs Impure” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menggunakan Pipe Bawaan
- Merangkai dan Memberi Parameter pada Pipe
- Membuat Pipe Kustom
- Pipe Pure vs Impure