Photo by MANOJ AP on Unsplash

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ını 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.

React LifeCycle

Render sırasında JSX elemanları Babel yardımı ile React API si olan React.createElement(component, props, …children) call dönüştürür. Dönen Element nesnesi gerçek DOM yerine VDOM nesnesinin oluşması ve güncellenmesini sağlamak için ReactDOM.render() fonksiyonuna verilir.

Sonrasında Virtual DOM mevcut güncellemeler ile gelen Diff ve Reconciliation işlemi yapılır..

https://s3.amazonaws.com/media-p.slid.es/uploads/63938/images/2379617/virtual-dom-update.png

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.

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow

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..

React Ref API

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.

https://react.semantic-ui.com/modules/popup/#usage-context-controlled

Örneğin bir düğmeye tıklayınca uzaktaki bir bileşenin metodunu çağırmak isteyelim focus vb…

https://reactjs.org/docs/refs-and-the-dom.html

Bileşen eklendiğinde, React, current özelliğini DOM elemanı ile atar ve bileşen çıkarıldığında geri null atanır. ref güncellemeleri componentDidMount veya componentDidUpdate 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.