Angular Academy · Ders

Hesaplanan Sinyaller

Otomatik olarak güncellenen değerler türetin.

Hesaplanan Sinyaller, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Hesaplanmış Sinyal Nedir

Bir computed() sinyali, bir veya daha fazla başka sinyalden değer türetir. Kaynak sinyal değiştiğinde hesaplanmış değer tembel olarak yeniden hesaplanır; yani yalnızca bir şey onu okuduğunda.

Hesaplanmış sinyaller salt okunurdur: üzerlerinde .set() çağıramazsınız.

computed Oluşturma

computed() işlevine bir işlev geçirirsiniz. Angular, bu işlevin içinde okuduğunuz her sinyali otomatik olarak izler.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Otomatik Bağımlılık İzleme

Bağımlılıkları elle hiçbir zaman tanımlamanız gerekmez. Geri çağırma işlevinin içinde price() ve quantity() değerlerini okumak, bunları otomatik olarak bağımlılık olarak kaydeder.

Bir sinyal koşullu olarak okunur ve ilgili koda ulaşılmazsa o çalıştırmada izlenmez.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Tembellik ve Önbelleğe Alma

Hesaplanmış bir değer yalnızca okunduğunda hesaplanır ve sonucu önbelleğe alınır. Kaynaklarda değişiklik olmadan iki kez okursanız işlev bir kez çalışır.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Hesaplanmış Sinyalleri Zincirleme

Hesaplanmış sinyaller başka hesaplanmış sinyallere bağlı olabilir ve tepkisel bir grafik oluşturabilir.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Bir Bileşende computed Kullanma

Hesaplanmış sinyaller bileşenlerde özellikle kullanışlıdır. Şablon, yalnızca hesaplanmış değer gerçekten değiştiğinde yeniden oluşturulur.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Hesaplanmış Sinyaller Salt Okunurdur

Hesaplanmış bir sinyali ayarlamaya çalışmak derleme zamanı hatasına yol açar. Bunlar yalnızca türetilmiş durumu ifade etmek için vardır.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Eşitlik ve Atlanan Yeniden Hesaplamalar

Varsayılan olarak hesaplanmış bir sinyal karşılaştırma için Object.is kullanır. Yeni hesaplanmış değer eskisiyle aynıysa bağımlı öğelere bildirim gönderilmez ve gereksiz iş önlenir.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Özel Eşitlik İşlevi

Bir hesaplanmış değerin ne zaman değişmiş sayılacağını denetlemek için equal seçeneğini geçebilirsiniz; bu, nesneler veya diziler için kullanışlıdır.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

computed İçinde Yan Etkilerden Kaçınma

Hesaplanmış bir değer katışıksız olmalıdır: HTTP çağrıları, davranış olarak günlük kaydı tutma ve diğer sinyalleri değiştirme yapılmamalıdır. Yan etkiler effect() içinde yer alır. Hesaplanmış değerleri katışıksız tutmak, tepkisel grafiği öngörülebilir kılar.

computed ve Yöntemler

Bir şablon yöntemi her değişiklik algılama döngüsünde çalışır. Hesaplanmış bir değer ise yalnızca bağımlılıkları değiştiğinde çalışır ve sonucu önbelleğe alır; bu, türetilmiş değerler için çok daha verimlidir.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Kısa Kontrol

Hesaplanmış sinyalleri ne kadar anladığınızı test edin.

Özet: Hesaplanmış Sinyaller

computed() işlevinin otomatik bağımlılık izleme, tembel değerlendirme ve sonuçları önbelleğe alma özelliklerine sahip salt okunur türetilmiş sinyaller oluşturduğunu öğrendiniz.

Katışıksız tutun; yan etki kullanmayın.
Başka hesaplanmış sinyallere bağlı olabilirler.
Özel değişiklik algılama için equal kullanın.

Sırada: effect() ile yan etkileri çalıştırma.

Sıkça Sorulan Sorular

“Hesaplanan Sinyaller” dersi ücretsiz mi?

Evet — “Hesaplanan Sinyaller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Hesaplanan Sinyaller” dersinde ne öğreneceğim?

Otomatik olarak güncellenen değerler türetin. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Hesaplanan Sinyaller” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön