Nov 30, 2020
REACT DOC SERIES
React Docs -3 (Code Sharing)
Bu yazıda kod paylaşımı için HOC (High Order Components) ve Render Props yöntemlerini analiz ediyor olacağım.
Kod Paylaşımı React’ın bileşen yapısı sayesinde Inheritance yerine sadece Composition yöntemi ile bileşenlerin birleşerek büyük sistemler oluşturduğunu önceki yazılarımda anlatmıştım. Ama bazı durumlar var ki bileşen içerisindeki davranışı diğer bileşenler tarafından kullanmak istediğimiz durumlar ortaya çıkabiliyor ama React yapılarının bileşen olmasından dolayı bu davranışı soyutlayarak çıkarmak için bazı gelişmiş yöntemler kullanmak gerekiyor. Bunlar;
- High Order Components
- Render Props
- Hooks
Not: Mixin kod paylaşımını sağlayan bir mekanizma sağlasada Frontend Bileşen Kütüphaneleri tarafından tercih edilmez ve kullanılması zararlı bulunur (React, Vue, Svelte …)
Bu yazıyı okumadan önde React Doc Series önceki yazılarını okumamış iseniz aşağıdaki linklerden okuyabilirsiniz.
Bu yazıda aşağıdaki 2 doküman üzerinden ilerliyor olacağız.
1. High Order Components
Aslında bu HOC(High Order Components) kullanılma mantığını React Örnek Proje Mimarisin yazısında anlatmıştım
Ve bu konuya değinirken High Order Function benzerliğinden bahsetmiştim
Argümanlarında 1 yada 1 den fazla function referansını parametre olarak alan veya return değerini geriye fonksiyon olarak dönen fonksiyonlara High Order Functions denir.
HOC’de Argümanlarında bir veya birden fazla bileşeni alıp, geriye Bileşen dönen ve bu kapsama sırasında bu bileşenlere ekstra güçler kazandırmayı sağlar
Higher Order Components uygulama genelini ilgilendiren çoğunluk bileşenin bu ortak davranışa ihtiyaç duyulan yerlerde kullanılması mantıklı olur. Yani Redux — connect, Router — witRouter uygulamanın genelinde kullanılan HOC örnektir.
Aşağıdaki örnekte görüleceği gibi CommentList ve BlogPost üzerinden DataSource kullanımı aynı davranışı sergiliyor. Bunun gibi 100 lerce benzer çalışan bileşeniniz olduğunu düşündüğünüzde aynı mantıksal kodları tüm bileşenler içerisinde tekrar ettiğinizi farkedeceksiniz.
- Mount DataSource addChangeListener
- UnMount DataSource removeChangeListener
- handleChange fetch tekrar çağrılarak gelen verinin state atanması
render edilen verilerde ve gösterimde farklılıklar olsa bile DataSource ile olan bağlantı davranışları aynıdır. HOC kullanarak yukarıdaki 3 adımdaki davranışı soyutlayıp DataSource.getCommnet, DataSource.getBlogPost gerçekleştirimlerini bu soyutlamalar içerisinde nasıl kullanabiliriz ? withSubsciption Mevcut bileşenimizi ve fetch aksiyonlarımızı vererek
withSubscription bileşeni HOC input bileşenini değiştirmediğini ve orjinal bileşeni bir container içine alarak örneğin CommentListWithSubscription bileşeni yaratır. Bir HOC yan etkisi(side-effect)olmayan saf bir fonksiyondur(pure-function) . Konunun detayı için Pure Fonksiyon yazımı okuyabilirsiniz.
Burda bir durumda WrappedComponent prop olarak mevcut prop + HOC gelen data bilgisini birleştirmiş oluyoruz.
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return <WrappedComponent data={this.state.data} {...this.props} />;2. Render Props
Kod paylaşımı HOC ile Composition yaparak bir işlem gerçekleştirmiştik. Render Props ise bileşen içerisinde gerçekleştirilen bir hesaplamanın bir üst bileşenin props geçirmek için bileşenin render aşamasında props içerisindeki render fonksiyon çağırımı yaparak bileşen bilgisinin üst bileşene ve daha sonra diğer ihtiyaç duyulan yerlerde kullanılması
Bunun için React Doc sayfasında Mouse örneği konuyu oldukça güzel bir şekilde anlatmış
Senaryo
MouseTracker mouse bilgisinin x ve y bilgisini ekrana yazan bir bileşen geliştirelim. Şimdi bu mouse pozisyonun ucunda cursor olarak Kedi resmi göstermek isteyelim. Veya işi biraz daha ilerletip, başka bileşenler de de bu x,y bilgisini kullanmak istersek nasıl MouseTracker sadece bu state bilgisini diğer bileşenlere taşıyabileceğimizi analiz ediyor olacağız.
- MouseTracker <p> içerisinde x ve y değerini basıyor
- Kedi Resmi koymak için Mouse mantığını ayrı bir bileşenin içerisine koyup bunu MouseTracker → Mouse compose etmesiyle işlemi gerçekleştiriyoruz.
- Mouse çizimi sırasında mouse pozisyonun olduğu kısma Kedi resmi çizmek için MouseWithCat bileşeni oluşturduk bu bileşende içerisinde Cat bileşenini tutuyor.
- Peki Köpek, Ördek vb..çizimler için MouseWithDog, MouseWithDuck içerisindeki tüm handleMouseMove logic tüm bileşenlerin içerisine mi tekrar mı edecek ?
- İşte burada RenderProps özelliğinden faydalanabiliriz. Aynı Lifting StateUp örneğinde onClick event üst bileşene geçirdiğimiz gibi burada bir event ile değil sürekli olarak her render işleminde mouse x,y pozisyonu bir üst bileşene geçirilir.
- Mouse Tracker içerisindeki render fonksiyonu içerisinde state={x,y} değerleri artık Cat, Dog, Duck vs.. props parametresi olarak geçirebilir.
3. Hooks
Class Component bileşen yapısındaki kod paylaşım yöntemlerinden HOC ve RenderProps iç içe Wrapping yaparak kod okunabilirliğini azaltan yöntemleri daha okunabilir ve hepsini tek bir yapıda birleştirerek gerçekleştirir. Bir sonraki yazıda da Hooks ile Code Sharing olayını analiz ediyor olacağım.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
