Memahami Isyarat Sudut: Panduan Komprehensif

Panduan ini meneroka Isyarat Sudut, paradigma pengaturcaraan reaktif moden yang memudahkan pengurusan keadaan. Kami akan memeriksa fungsi terasnya, termasuk isyarat boleh ditulis dan dikira, dan menunjukkan penggunaannya dengan kesan. Contoh praktikal akan mengukuhkan pemahaman anda.

Memahami Isyarat Sudut

Isyarat Sudut ialah primitif reaktif yang direka untuk keadaan yang lebih boleh diramal dan terurus. Tidak seperti kaedah lama (Boleh Diperhatikan, Pemancar Acara), Isyarat menawarkan pendekatan yang lebih bersih kepada pembolehubah reaktif, mengemas kini paparan secara automatik pada perubahan keadaan.

Atribut Isyarat Utama:

• Kemas Kini Segerak: Perubahan isyarat dipantulkan serta-merta.
• Penjejakan Kebergantungan: Sudut menjejaki kebergantungan isyarat secara automatik dalam komponen dan arahan.
• Penggunaan Intuitif: Isyarat memperkemas pengurusan keadaan berbanding dengan Boleh Diperhatikan.

Isyarat Boleh Tulis: Asas

Isyarat Boleh Tulis ialah blok binaan asas, yang mewakili keadaan reaktif boleh ubah.

Mencipta Isyarat Boleh Tulis:

Gunakan fungsi signal():

import { signal } from '@angular/core';

export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}

Kaedah Isyarat Boleh Tulis:

1. set(newValue): Memberikan nilai baharu secara langsung. this.counter.set(10);
2. update(callback): Kemas kini menggunakan fungsi panggil balik. this.counter.update(val => val * 2);
3. mutate(callback): Mengubah secara langsung objek atau tatasusunan. this.arraySignal.mutate(arr => arr.push(5));

Isyarat Dikira: Nilai Terbitan

Isyarat yang dikira memperoleh nilainya daripada isyarat lain, mengemas kini secara automatik apabila kebergantungan berubah. Ia adalah baca sahaja.

Mentakrifkan Isyarat Dikira:

Gunakan fungsi computed():

import { signal, computed } from '@angular/core';

export class PriceCalculator {
  price = signal(100);
  quantity = signal(2);
  totalPrice = computed(() => this.price() * this.quantity());
}

Mengemas kini price atau quantity secara automatik mengira semula totalPrice.

Kesan: Menguruskan Kesan Sampingan

Kesan melaksanakan kesan sampingan (pengelogan, panggilan API, manipulasi DOM) apabila isyarat berubah.

Mencipta Kesan:

Gunakan fungsi effect():

import { signal, effect } from '@angular/core';

export class EffectExample {
  counter = signal(0);

  constructor() {
    effect(() => console.log('Counter:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }
}

Kes Penggunaan Kesan:

• Pengelogan konsol
• Permintaan HTTP
• Manipulasi DOM luaran

Contoh Lengkap: Apl Kaunter

Apl kaunter ini menunjukkan isyarat dan kesan yang boleh ditulis, dikira dan kesan:

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Counter: {{ counter() }}</p>
      <p>Double: {{ doubleCounter() }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  counter = signal(0);
  doubleCounter = computed(() => this.counter() * 2);

  constructor() {
    effect(() => console.log('Counter changed:', this.counter()));
  }

  increment() {
    this.counter.update(val => val + 1);
  }

  decrement() {
    this.counter.update(val => val - 1);
  }
}

Amalan Terbaik Isyarat:

1. Meminimumkan Kesan: Pastikan kesan sampingan padat.
2. Gunakan Isyarat Dikira: Untuk keadaan terbitan, pilih computed().
3. Elakkan Mutasi Berlebihan: Pilih update() lebih mutate().
4. Gabungkan dengan Suntikan Ketergantungan: Sepadukan isyarat dengan perkhidmatan untuk kebolehskalaan.

Kesimpulan

Isyarat Sudut menyediakan pendekatan moden dan cekap untuk pengurusan keadaan reaktif. Kesederhanaan dan keupayaan mereka meningkatkan pengalaman pembangun dan prestasi aplikasi, membawa kepada kod Angular yang lebih boleh diselenggara dan boleh diramal.

Atas ialah kandungan terperinci Memahami Isyarat Sudut: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!