REACT DOC SERIES
React (Code Sharing) Örnekleri
Ortak Kod geliştirirken kod tekrarı yapmamak üzerine DRY ve KISS olayından Yazılım Geliştirme Prensiplerinden bahsetmiştik Bu yöntemlerden Inheritance, HOC, Render Props ve Hooks bu konuyu nasıl ele aldığını örnekler ile anlatmaya çalışacağım.
--
Code Sharing yöntemlerinden bahsederken aşağıdaki yöntemleri React Docs -3 (Code Sharing) yazımda işin biraz tekniğinden bahsetmiştim. Bu yazıda aşağıdaki konuları bir örnek ile anlatmaya çalışacağım.
- Default ..
- Inheritance
- HOC (High Order Component)
- Render Props (Render Props)
- Hooks
Bu yazıda bunu bir örnek ile anlatmaya çalışacağım. Örnek basit aslında 3 tane dikdörtgen Kırmızı, Yeşil, Mavi. Siz bunları birbirinden farklı farklı bileşenler olarak düşünebilirsiniz. Şu anda aynı çizim şeklini kullansa bile Mavi: Harita, Yeşil: Chart, Kırmızı: UI bileşeni olarak hayal edin.
Aşağıdaki altı çizili 3 farklı bileşen içinde kod tekrarı yapmamız gerekecek.. 5 farklı yöntemde aynı amaca farklı bakış açıları ile hizmet ediyor. En son trend olan React Hooks ama biz tüm yöntemlerin üzerinden geçiyor olacağız.
Default
Inheritance
Kodumuzu biraz geliştirerek Inheritance yöntemini deneyelim. Burda hovering logiclerini extends ederek kullanmamış olduk ama 2 tane problemli durum oluşturduk.
- Birincisi Parent sınıfın (BoxComponent) render hiç ihtiyacı yokken yazmak zorunda kaldık..
- İkincisi BlueComponent → BoxComponent extends ederek ona bağımlı hale getirdik.. Başka ortak logicleri multiple inheritance yapmak çok zor (mixin) de tercih edilen bir yöntem değil .
Not: Inheritance konusunun UI bileşenleri için neden problem oluşturduğunu UI Bileşenleri Nasıl Evrimleşti yazımdan okuyabilirsiniz.
High Order Component
High Order Components ismi High Order Function geliyor ve 2 yapıda bir Decorator Tasarım örüntü tipinde, bu konulara hakim değilseniz aşağıdaki 2 yazımı okuyabilirsiniz.
Bu 2 yapıdan anlayacağınız gibi biz bileşenimizin Interface değiştirmeden yeteneklerine ekstra özellikler eklemek istediğimizde bu yöntemi kullanıyoruz.
Aşağıdaki örnekte BlueComponent state yerine props ile hovering erişiyor ve içerisinden Mouse ile ilgili logic çıkarıyoruz.. withHover kendisine gelen bileşenleri Mouse ile Hover yeteneği kazandırıyor.
Render Props
Render Props yönteminde siz Hover bileşeninde elde ettiğiniz hovering state… aşağıdaki ara Function Bileşen ile sürekli olarak içerdeki bileşene geçirirsiniz. Bu sayede RBlueComponent her değiştiğinde içerideki bileşenin props güncellenmiş olur.
<Hover>{(hovering) => <RBlueComponent hovering={hovering}/>}</Hover>
Hooks
State içeren bir yapıyı UI kullanmadan React içerisinde kullanabilmenin yolu Hooks ile açılmış oldu. Bu yöntemde global bileşenlerin faydalanabileceği util bir useHover Hook yazıyoruz. Bunu herhangi bir bileşen compose ederek rahatlıkla kullanabiliyor. Bu sayede HoC ve RenderProps oluşan bileşenler render üzerinden kurulan zorlamadan kurtulmuş oluyoruz.
Kod
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
