9 Ekim 2020

React-Native 8 – Hook kimdir, kimlerdendir ?

ile Turan Yunus

React 16.8’le beraber hayatımıza hook’lar girdi. Peki neden böyle bir şeye ihtiyaç duyuldu? React’ın en zayıf ve tartışılmaya açık noktalarından biride kod karmaşıklığıydı. Yaşam döngüsü sırasında bir çok bileşen vardı. Örn: componentDidMount, componentDidUpdate vs gibi bu da kodu çok karmaşık ve kalabalık hale getiriyordu. Proje büyüdükçe kodların okunması ve kodlara açıklık getirmek bir hayli zor oluyordu.

React ‘ı geliştiren takım ise bu çözüm olarak bize hookları tanıttı. React dünyasında da mükemmel bir ses getirdiler. Bana sorarsanız kesinlikle çok mantıklı ve açıklayıcı bir şekilde mükemmel bir geliştirme olmuş. Kodlarımız artık daha sade ve anlaşılabilir. Artık react yazarken tamamen bileşenlere değil de bir method’un algoritmik yeteceğine işi yüklüyorsun. 

Sınıflarla(Class) artık çalışmak yerine fonksiyonlarla çalışıyoruz. Render olayımız ortadan kalkıyor tamamen return içinde ui bileşenlerimizi tanımlıyoruz.


Peki nedir bu hooklar ?

useState  —> daha önceden this.state diye tanımlıyorduk. Artık öyle değil. 🙂 Hemen aşağıdaki kod’a bakalım.

useEffect —> eskiden yaşam döngüsü ile kullanmamız gereken bir çok bileşen vardı. Artık yok. Tamamen useEffect’in kollarına bırakıyoruz. İlk render dahil olmak üzere her render(kullanımını ona göre ayarlarsan) edildiğinde bu metoda gelmektedir.

Örnek

import React, { useState, useEffect } from 'react'; // react içinde tanımlıyorsun
	
  Export default function Exp() {
	// “x” adında yeni bir state değişkeni tanımlıyoruz ve default olarak değerini sıfır veriyoruz.
        const [x, setX] = useState(0);
	const [params, setParams] = useState(‘’);
   	
	// Uygulama her render oldugunda aşagıdaki useEffect’e giriyor.
  	useEffect(() => {
    		console.log(‘${x} ‘ kere tıkladın.’)
  	});

	// En aşagıdaki köşeli parentezlerin boş olması bu useEffect’e sadece ilk render oldugunda girecektir anlamına gelir.
  	useEffect(() => {
    		console.log(‘${x} ‘ kere tıkladın.’)
  	},[]);

	// En aşagıdaki köşeli parentezlerin içine yazılan değeri input olarak kabul eder ve params state’i her tetiklendiğinde bu useEffect’i ziyaret eder.
  	useEffect(() => {
    		console.log(‘${x} ‘ kere tıkladın.’)
  	},[params]);

	// uygulama ilk açıldığında kullanıcı ekranda 0 görücektir. Buton’a her bastığında ise ekranda 0 olan değer birer birer artıcaktır.
	return (
		<View>
			<Text>{x}</Text>
			<Button onClick = {()=> setX(x+1)}>Hook<Button>
		</View>
      );
 }

Aslında ilk başta zorlasa da sonradan çok hoşunuza gidicek bir yapıdır. Gerçekten şu an kullanırken zevk ile yazıyorum diyebilirim. Görsel olarak da aşağıya bir görsel bırakıyorum. O görselde çok güzel bir şekilde anlatılmıştır.

Hooks

Teşekkürler ilginiz için,

Sürç-i Lisan ettiysek.

Affola