--- title: Referanslar source: 'https://academia.sh/tr/kurslar/bilesen-tabanli-gelistirme/referanslar' course: 'Bileşen Tabanlı Arayüz Geliştirme' language: tr updated: '2026-08-17T18:09:13+00:00' license: 'CC BY-SA 4.0' --- # Referanslar Oluşturmalar arasında yaşayan ama değiştiğinde yeniden çizim başlatmayan değerler; saklama biçimlerinin iki ekseni, kutunun belgeye yazma aşamasında dolması, oluşturma sırasında kutuya dokunmama kuralı ve belge düğümüne erişimin bileşen sınırından geçirilmesi. Önceki iki ders iki kategori kurdu. Durum, oluşturmalar arasında yaşar ve değiştiğinde yeni bir oluşturma başlatır. Türetilmiş değer hiç saklanmaz, her oluşturmada yeniden hesaplanır. Ölçüm istasyonu sayfasında bu iki kategoriye girmeyen değerler vardır. Kaydırma olaylarını sayan bir sayaç, gönderilen isteğin sıra numarası, bir zamanlayıcının kimliği, bir önceki oluşturmadaki süzgeç türü, tablonun kendisini tutan belge düğümü. Hepsinin ortak yanı şudur: oluşturmalar arasında yaşamaları gerekir, ama değişmeleri ekranda hiçbir şeyi değiştirmez. Bu ders üçüncü kategoriyi tanımlar ve ona **oluşturma dışı başvuru (mutable reference)** der. Kısaca kutu denecektir: içinde tek bir alan taşıyan, bileşen örneğine bağlı bir kap. ## İki Eksen Bir değeri nerede tutacağına karar vermek iki bağımsız soruya iner: değer bir sonraki oluşturmada duruyor mu, ve değişmesi bir oluşturma başlatıyor mu. | Saklama biçimi | Oluşturmalar arası yaşar | Değişmesi oluşturma başlatır | |---|---|---| | Gövde içindeki yerel değişken | hayır | hayır | | Durum yuvası | evet | evet | | Oluşturma dışı başvuru | evet | hayır | | Modül düzeyi değişken | evet | hayır | Dört satırın üçü ayrı gereksinimi karşılar. Yerel değişken bir oluşturma içinde ara sonuç tutmaya yarar. Durum yuvası ekranda görünen her şey içindir. Başvuru, yaşaması gereken ama görünmeyen değerler içindir. Dördüncü satır — modül düzeyi değişken — başvuruyla aynı iki cevabı verir ama bir farkı vardır: bileşene değil modüle bağlıdır. Aynı bileşenden sayfada iki örnek varsa ikisi aynı değişkeni paylaşır. Sayfada iki ölçüm tablosu bulunduğunda, kaydırma sayacının modül düzeyinde tutulması iki tablonun sayaçlarını birbirine karıştırır. Başvuru örneğe bağlıdır; her tablonun kendi kutusu olur. ## Aynı Sayacı Üç Ayrı Yerde Tutmak Fark ölçülebilir. Ölçüm tablosu kaydırma olaylarını sayar, ama ekrandaki göstergeyi her beş olayda bir günceller. Aynı gereksinim üç saklama biçimiyle karşılanır. ```js // saklama.mjs — ayni sayaci uc ayri yerde tutmanin sonucu const OLAYLAR = ["k", "k", "k", "p", "k", "k", "k", "k", "k", "p", "k", "k"]; const ESIK = 5; function senaryo(bicim) { let cizim = 1; // ilk olusturma let yerel = 0; // govde icindeki yerel degisken let durum = 0; // durum yuvasi const kutu = { deger: 0 }; // olusturma disi basvuru let ekranda = 0; const olustur = () => { cizim++; yerel = 0; }; // her olusturmada yerel sifirlanir for (const olay of OLAYLAR) { if (olay === "p") { olustur(); continue; } // sayacla ilgisiz bir durum degisimi if (bicim === "yerel") { yerel++; if (yerel % ESIK === 0) { ekranda = yerel; olustur(); } } else if (bicim === "durum") { durum++; ekranda = durum; olustur(); // her yazim bir olusturma uretir } else { kutu.deger++; if (kutu.deger % ESIK === 0) { ekranda = kutu.deger; olustur(); } } } const sayac = bicim === "yerel" ? yerel : bicim === "durum" ? durum : kutu.deger; console.log( `${bicim.padEnd(5)} | sayac=${String(sayac).padStart(2)}`, `| ekranda=${String(ekranda).padStart(2)} | olusturma=${cizim}`, ); } console.log("10 kaydirma + 2 ilgisiz durum degisimi; ekran her 5 kaydirmada bir guncelleniyor"); for (const b of ["yerel", "durum", "kutu"]) senaryo(b); ``` ``` 10 kaydirma + 2 ilgisiz durum degisimi; ekran her 5 kaydirmada bir guncelleniyor yerel | sayac= 2 | ekranda= 5 | olusturma=4 durum | sayac=10 | ekranda=10 | olusturma=13 kutu | sayac=10 | ekranda=10 | olusturma=5 ``` Üç satır üç ayrı sonucu gösterir. Yerel değişken sayıyı **kaybeder**. On kaydırma sayılmıştır ama sayaç ikide durmaktadır, çünkü araya giren her oluşturma — sayacın kendi tetiklediği iki oluşturma ve süzgeç panelinden gelen iki oluşturma — değişkeni sıfırlamıştır. Bu, yerel değişkenin bir eksikliği değil tanımıdır. Durum yuvası doğru sayar, ama on üç oluşturma üretir. Sayacın her artışı bir oluşturma demektir; oysa ekran bu artışların yalnız ikisinde değişmiştir. On bir oluşturmanın çıktısı bir öncekiyle aynıdır. Başvuru kutusu doğru sayar ve beş oluşturma üretir: ekranın gerçekten değiştiği iki oluşturma, süzgeç panelinden gelen iki oluşturma ve ilk oluşturma. Bu, üçüncü kategorinin neden var olduğunu tek satırda söyler. ## Kutunun Ne Zaman Dolduğu Başvurunun ikinci kullanımı, bileşenin ürettiği belge düğümüne erişmektir. Bir düğümü odaklamak, ölçmek ya da bir gözlemciye vermek için o düğümün kendisi gerekir; oysa bileşen gövdesi düğümleri değil, düğüm tarifini üretir. Bağ, çalışma zamanının kutuyu doldurmasıyla kurulur. ```js // kutu-ne-zaman-dolar.mjs — dugum kutusunun dolma ani ve "onceki deger" kalibi const kutu = (baslangic) => ({ deger: baslangic }); const dugumKutusu = kutu(null); // belgedeki tablo dugumu buraya yazilacak const oncekiTur = kutu(null); // bir onceki olusturmadaki tur let cizim = 0; function govde(tur) { cizim++; const degisti = oncekiTur.deger !== null && oncekiTur.deger !== tur; console.log(`olusturma ${cizim} (tur=${tur})`); console.log(` govde okur -> dugum kutusu: ${dugumKutusu.deger}`); console.log(` govde okur -> onceki tur : ${oncekiTur.deger}, degisti: ${degisti}`); return { etiket: "table", anahtar: `tablo-${tur}` }; } function belgeyeYaz(agac) { const dugum = `[dugum ${agac.etiket} ${agac.anahtar}]`; dugumKutusu.deger = dugum; // kutuyu calisma zamani doldurur console.log(` yazma asamasi -> kutu = ${dugum}`); } function yanEtkiler(tur) { console.log(` yan etki okur -> ${dugumKutusu.deger} olculebilir`); oncekiTur.deger = tur; // bir sonraki olusturma icin saklanir } for (const tur of ["sicaklik", "sicaklik", "nem"]) { const agac = govde(tur); belgeyeYaz(agac); yanEtkiler(tur); } ``` ``` olusturma 1 (tur=sicaklik) govde okur -> dugum kutusu: null govde okur -> onceki tur : null, degisti: false yazma asamasi -> kutu = [dugum table tablo-sicaklik] yan etki okur -> [dugum table tablo-sicaklik] olculebilir olusturma 2 (tur=sicaklik) govde okur -> dugum kutusu: [dugum table tablo-sicaklik] govde okur -> onceki tur : sicaklik, degisti: false yazma asamasi -> kutu = [dugum table tablo-sicaklik] yan etki okur -> [dugum table tablo-sicaklik] olculebilir olusturma 3 (tur=nem) govde okur -> dugum kutusu: [dugum table tablo-sicaklik] govde okur -> onceki tur : sicaklik, degisti: true yazma asamasi -> kutu = [dugum table tablo-nem] yan etki okur -> [dugum table tablo-nem] olculebilir ``` Sıra üç aşamadır: gövde çalışır, ağaç belgeye yazılır, yan etkiler çalışır. Kutu ikinci aşamada dolar. Bu yüzden ilk oluşturmanın gövdesinde kutu boştur — ölçülecek düğüm henüz yoktur — ve yan etkide doludur. Düğümü ölçen, odaklayan ya da bir gözlemciye veren kod bu nedenle yan etki kaydında yazılır. Üçüncü oluşturmanın gövdesi ikinci bir ayrıntıyı gösterir: kutu, o anda **bir önceki oluşturmanın** düğümünü taşımaktadır. Gövde çalışırken belgede hâlâ eski ağaç durur. Bu, kutunun eskiliği değil aşamaların sırasıdır. İkinci kutu farklı bir kalıbı kurar. Yan etkide yazılan, gövdede okunan bir kutu, bir önceki oluşturmadaki değeri taşır ve karşılaştırmayı olanaklı kılar. Üçüncü oluşturmada "degisti" doğru olmuştur: gövde, türün bu turda değiştiğini yalnız kutu sayesinde bilir. Buna **önceki değer kalıbı** denir. ## Oluşturma Sırasında Kutuya Dokunmamak Bağlayıcı kural: gövde bir kutuyu ne okur ne yazar. Kutuya dokunmak yan etkilerde, olay işleyicilerinde ve zamanlayıcı geri çağırımlarında serbesttir. Gerekçe üç maddedir. Gövdenin sözleşmesi saflıktır ve kutuya yazmak bir yan etkidir. Gövde yarıda kesilebilir; kesilen bir gövdenin kutuya yazdığı değer, hiç gösterilmeyen bir oluşturmadan artakalır. Gövde çalışırken belge hâlâ bir önceki ağacı taşır; okunan düğüm kutusu eski düğümü verir. Kuralın tek istisnası, kutunun ilk değerini bir kez kurmaktır: kutu boşsa doldurup dolu olduğunda dokunmamak, hiçbir oluşturmada farklı bir sonuç üretmediği için saflığı bozmaz. ## Belge Düğümüne Erişim ve Bileşen Sınırı Bir düğüme başvuru tutmanın meşru kullanımları sayılıdır: odağı bir ögeye taşımak, bir ögenin ölçüsünü okumak, bir gözlemciyi hedefe bağlamak, bir medya ögesini oynatmak, bileşenin denetimi dışında yazılmış bir kitaplığa bir kap vermek. Bu listenin dışında kalan her şey — sınıf eklemek, metin yazmak, bir çocuğu gizlemek — bildirimsel yolla, yani durumdan yapılır. Düğümü elle değiştiren kod, bir sonraki oluşturmada uzlaşmanın üzerine yazdığı bir değişiklik üretir ve iki güncelleme kaynağı çakışır. Başvurunun bileşen sınırından geçmesi ayrı bir tasarım kararıdır. Üst bileşen, alt bileşenin ürettiği düğüme erişmek isteyebilir: süzgeç paneli kapandığında odağın tablodaki ilk satıra dönmesi gerekir. Ham düğümü dışarı açmak kapsüllemeyi bozar; dışarıdaki kod artık bileşenin iç yapısına — hangi etiketin kullanıldığına, kaç sarmalayıcı olduğuna — bağlanır. Daha sağlam biçim, düğümü değil bir komut yüzeyini açmaktır: bileşen dışarıya `odakla` ve `basaKaydir` gibi adlandırılmış işlemler verir, düğümü kendinde tutar. İç yapı değiştiğinde yalnız bileşen değişir. Bu, Programlama Temelleri kursundaki arayüz–gerçekleştirim ayrımının bileşenlere uygulanmış hâlidir. ## Ne Zaman Durum, Ne Zaman Kutu Karar tek soruyla verilir: **bu değer değiştiğinde ekranda bir şey değişmeli mi?** Değişmeliyse o değer durumdur; kutuya yazmak ekranı sessizce eski bırakır ve hata bulunması güç bir sınıf üretir — veri doğrudur, görünüm eskidir. Değişmemeliyse kutudur; duruma yazmak her değişimde gereksiz bir oluşturma üretir. İki ara durum sık karşılaşılır. Bir değer bazen ekranı ilgilendiriyorsa, ikiye bölünür: ham sayaç kutuda, ekranda gösterilen eşik değeri durumda — yukarıdaki örnekteki gibi. Bir değer yalnız olay işleyicisinde okunuyorsa kutudur; hiçbir oluşturma onu okumaz. ## Özet - Saklama biçimleri iki eksende ayrılır: oluşturmalar arasında yaşama ve değiştiğinde oluşturma başlatma. - Oluşturma dışı başvuru yaşar ama oluşturma başlatmaz; modül düzeyi değişkenden farkı bileşen örneğine bağlı olmasıdır. - Aynı sayaç yerel değişkende tutulduğunda kaybolur, durumda tutulduğunda gereksiz oluşturma üretir, kutuda tutulduğunda ikisi de olmaz. - Kutu belgeye yazma aşamasında dolar; gövde çalışırken bir önceki oluşturmanın düğümünü taşır, bu yüzden düğüme dokunan kod yan etkide yazılır. - Gövde kutuyu ne okur ne yazar; tek istisna kutunun ilk değerinin bir kez kurulmasıdır. - Düğüm başvurusu odak, ölçüm ve dış kitaplık bağlama içindir; sınır dışına ham düğüm değil adlandırılmış komutlar açılır. ## Sonraki Adım Buraya kadar tanımlanan üç saklama biçimi de tek bir bileşenin içinde kalır. Değerin başka bir bileşene ulaşması için tek yol vardır: üst bileşenden alta doğru verilmek. Ölçüm istasyonu sayfasında bu yolun uzadığı bir durum vardır. Sıcaklık biriminin santigrat mı fahrenhayt mı gösterileceği sayfanın en üstünde seçilir, ama bu bilgiye ihtiyaç duyan yer en altta, tablonun içindeki ölçüm rozetidir. Aradaki dört bileşenin hiçbiri birimi kullanmaz; yalnız taşır. Sonraki ders bu zinciri kısaltan mekanizmayı, ağaçta bir değer sağlayıp aşağıdaki herhangi bir düğümde okumayı ele alır.