REACT DOC SERIES
React Ref (Temel Konseptler)
DOM Eleman Referanslarına Neden İhtiyacımız Var ? Tek başına dışarıdan state/props mekanizması ile Controlled Bileşenler ile işi çözemiyor muyuz ?
--
Referans yani React.createRef ihtiyacı anlamak için aşağıdaki 3 resmi kafanızda oluşturmanız gerekiyor.
React render işleminden sonra kendi yapısındaki JSX değişiklikleri Virtual DOM aktarır.
Render sırasında JSX elemanları Babel yardımı ile React APIsi olan React.createElement(component, props, …children) call dönüştürülür ve dönen Element nesnesi gerçek DOM yerine VDOM nesnesinin oluşması ve güncellenmesini sağlamak için ReactDOM.render() fonksiyonuna verilir. Sıra geldi Virtual DOM mevcut güncellemeler ile gelen Diff ve Reconciliation işlemi yapılır..
Peki Virtual DOM ile Ref ne alakası var. İşte asıl sorumuza gelelim. Gerçek DOM dediğimizde Cihaz Ekran Özelliklere, Layouta ve Z-Index gibi değerlere göre ekrana çizdirildiğinde ekstradan DOM Elemanı içerisinde pozisyonu veya bazı Eleman fonksiyonlarına sahipken VDOM elemanı o bilgilere sahip değiliz.
2nci bir konuda VDOM ağacındaki yapıdan dolayı o Ref başka Ağaç hiyerarşisindeki düğümler(node) ihtiyaç duyuyor olabilir. Bu durumda bunun ref nesnesine geçirme ihtiyacı duyabiliriz.
- Burada önce bir boş referans Objesi veya Pointer oluşturmak. ref=React.createRef()
- Sonrasında bu eleman içerisine bir prop olarak geçiriliyor. ref={…}. Eleman bunu elemanı render ederken ilgili referansınıda bu ref değişkenine atıyor..
Kullanım Alanları
Örneğin bir Popup çıkarmak istiyoruz. Ama başka bir elemanın üzerinde Popup gözükmesini Trigger Eleman ile üzerinde Gözükmesini istediğimiz elemanlar ayrı olsun. Bu durumda Popup Bileşenine üzerinde açılmasını istediğimiz bileşenin referansını geçmemiz gerekiyor.
Örneğin bir düğmeye tıklayınca uzaktaki bir bileşenin metodunu çağırmak isteyelim focus vb…
Bileşen eklendiğinde, React,
current
özelliğini DOM elemanı ile atar ve bileşen çıkarıldığında gerinull
atanır.ref
güncellemelericomponentDidMount
veyacomponentDidUpdate
yaşam döngüsü metodlarından önce gerçekleşir. (reactjs.org)
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.