React Widget Renderer 3 (CustomHook)
Önceki yazılarda bir tab componenti yapmıştık. Bu tab compentine diğer componentleri tanımlamıştık, dışarıdan aldığı Json objesine göre bu tabı seçili elementini render ediyor ve ya etmiyordu. Aynı zamanda seçili componenti state inde tutuyordu. Bu tutma işlemi özellikle active class gibi css özelliklerinin verilmesinde kullanabiliriz.
Şimdi kullanıcılarımızın kendi temalarını kendi css lerini oluşturduğunu ve bunuda uygulamamıza run time da eklenmesi gerektiğini kurgulayalım. Bunuda custom hooks ile yapalım. React 16 dan sonra gelen en güzel özellik hookslar.
Çok kısaca hookslardan bahsedelim.Bana göre hooksların iki tane olayı var bizi class component yazmaktan kurtarıyor. this. keyword lerinden bizi kurtarıyor gerci es 6 ile bind etmeler daha kolay ama. Hooks lar ile herşeyi fonsiyonlara dökdük. Artık o kadar class component yazmıyorum ki nasıl yazıldığına bakmam gerekti.
Class component ile state tanımlarken , this.state { … } gibi bir tanımlama yapıyorduk ve update methodunu yapıyorduk ama şimdi.
const [state,updateState] = React.useState('ilk deger');Yukarıda hooks ile bir state tanımladık. state dizimin 0. elamanı ile stateme ulaşıyorum. dizimin 1.elamanı updateState ilede state min güncelleme methodu ve bunların hepsi useState methodunda geldi.
Bir diğer hooks ise lifecycle methodlarının yerine geçen useEffect. Bütün önceki lifecycle methodlarının yerine geçen harika birşey.
React.useEffect( ()=> {// get işlemi event işlemleri burada yapılır// Eğer unmount yapmak istersek return ile geri döneriz// Burada bir state güncellenebilir. Bir state değiştiğinde tekrardan useEffecti çalışıtmak istersek
},[HangiDurumDeğişirseUseEffectTekrardanÇalışacak])
Daha birkaç tane daha yeni gelen özellikler var ama onları başka zaman işleriz.Özellikle useCallback baya güzel ve performanslı.
Peki customHook nedir ? Aşağıdaki örneği inceleyelim. Aynı zamanda bu hooks app mizde kullanacağımız hook.
Aslında global bir yere fonksiyon yazmak gibi ben bu fonksiyonumu daha başka yerlerde de kullanacağım ve bu fonksiyonu kullandığım yerler fonksiyonumda değişikliğim olursa tekrar render edilsin gibi. Hook yazarken de reactın useState ve useEffect methodlarını kullanabiliyorum. Beni kod tekrarında kurtarıyor. Hoc ile de yazabilirdim…
export function useCss() {useEffect(() => {addCustomCss('/style/styles.css');}, []);}
Dışarı çıkardığımız useCss() fonksiyonu useCss çağrıldığı anda useEffect cağırılıyor oda tek bir sefer addCustomCss() methodunu ‘/style/styles.css’ parametresiyle çağırıyor.
function addCustomCss(url) {const link = document.createElement('link');link.setAttribute('rel', 'stylesheet');link.setAttribute('type', 'text/css');link.setAttribute('href', url);document.getElementsByTagName('head')[0].appendChild(link);}
addCustomCss() methodu ise parametre olarak gelen css dosyasını uygulamamıza inject ediyor. Bu methodlar yardımı ile run time da uygulamanızın css ini dışarıdan gelecek şekilde değiştirebilirsiniz. Peki bu react için çok doğru bir yöntem midir ? Aslında kullanım şeklinize bağlı olarak değil kullanılacak yada kullanılmayacak bütün css file larını uygulamama ekliyorum ve performans açısından kayıp. Yanlış kullanım kök componentte bütün css filelarını yüklemek. Doğru kullanım hook’s kullanarak secilen componentte componentin css lerini inject ederek kullanmak. Ama yapımız doğru kullanıma çok yaklaşık.
Buraya kadar tamam isek şimdi hookslarımızı app.js de çağıralım. Önce bir Json template objesi oluşturalım ardından ise küçük bir css yazalım.
useCss('/style/styles.css');
Evet css imizi import ettik. Şimdi sırada tab componentim için Json objesini eklemek kaldı.
function App() {useCss("/style/styles.css");const tema = useTemplate();const [tab, setTab] = useState("login");
App.js de yukarıdaki güncellemeleri yapıyorum. Artık Componentim tamamen dışarıdan css ve componentler ile çalışıyor.
