Angular Academy · Ders

computed ile Durum Türetme

Temel durumdan okuma modelleri oluşturun

computed ile Durum Türetme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Türetilmiş Durum

Durum çoğu zaman başka durumlardan hesaplanır: öğelerden bir toplam, filtrelenmiş bir liste veya geçerlilik göstergesi gibi. Angular'ın computed() işlevi, değerini diğer sinyallerden türeten salt okunur bir sinyal oluşturur.

computed Oluşturma

computed() işlevine bir işlev geçirin. Bu işlev diğer sinyalleri okur ve bir değer döndürür. Sonuç, yalnızca bağımlılıklarından biri değiştiğinde yeniden değerlendirilir.

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

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Otomatik Bağımlılık İzleme

Bağımlılıkları hiçbir zaman kendiniz bildirmeniz gerekmez. İşlevin içinde okuduğunuz sinyaller otomatik olarak bağımlılık hâline gelir. qty değişirse total yeniden hesaplanır; ilgisiz bir sinyal değişirse hesaplanmaz.

Önbelleğe Alma

computed() sonucunu önbelleğe alır. Bir bağımlılık değişene kadar, birçok kez okunduğunda işlev yalnızca bir kez çalışır. Bu sayede türetilmiş okuma modelleri, çok sayıda şablon bağlamasında kullanılsalar bile düşük maliyetli olur.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Depoda computed Kullanımı

Sinyal deposunun içinde, bileşenlerin şablonlarda yeniden hesaplama yapmak yerine doğrudan oluşturmaya hazır değerleri kullanabilmesi için hesaplanmış okuma modellerini dışa açın.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

computed Zincirleme

Hesaplanmış sinyaller başka hesaplanmış sinyalleri okuyabilir. Katmanlı okuma modelleri oluşturun: temel bir türetim, daha üst düzey bir modeli besler.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Filtreleme ve Arama

Yaygın bir okuma modeli, bir listeyi arama sinyaline göre filtrelemektir. Filtrelenmiş sonuç, liste veya sorgu değiştiğinde güncellenir.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Yan Etki Olmamalı

Bir computed() işlevi saf olmalıdır: yalnızca sinyalleri okumalı ve bir değer döndürmelidir. İçinde durumu değiştirmeyin, API çağırmayın veya başka sinyallere yazmayın. Yan etkiler için bunun yerine effect() kullanın.

Eşitlik ve Güncellemeleri At||||Atlama

Varsayılan olarak computed, değerin değişip değişmediğine karar vermek için başvuru eşitliğini (Object.is) kullanır. Yeni değer eski değere eşitse tüketicilere bildirim gönderilmez ve gereksiz işlem önlenir.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Şablonlarda computed Kullanımı

Hesaplanmış sinyalleri şablonlarda diğer sinyaller gibi okuyun. Angular yalnızca hesaplanmış değeri gerçekten değişen bağlamaları günceller.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

computed ve Yöntemler

Otomatik güncellenmesi ve önbelleğe alınması gereken, durumdan türetilmiş değerler için computed() kullanın. Argüman alan veya isteğe bağlı olarak çalışması gereken tek seferlik hesaplamalar için sıradan bir yöntem kullanın.

Kısa Kontrol

Hesaplanmış sinyaller konusundaki anlayışınızı kontrol edin.

Özet

computed() ile türetilmiş durum oluşturmayı; otomatik bağımlılık izlemeyi, önbelleğe alınan saf işlevleri, zincirlenebilir okuma modellerini ve eşitlik sayesinde atlanan güncellemeleri öğrendiniz. Şablonların bildirimsel kalması için hesaplanmış okuma modellerini depolardan dışa açın.

Sıkça Sorulan Sorular

“computed ile Durum Türetme” dersi ücretsiz mi?

Evet — “computed ile Durum Türetme” 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.

“computed ile Durum Türetme” dersinde ne öğreneceğim?

Temel durumdan okuma modelleri oluşturun 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 2. dersidir.

“computed ile Durum Türetme” 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