React Nedir? React Özellikleri Nelerdir?

React, Facebook tarafından geliştirilen kullanıcı ara yüzlerini oluşturmak için kullanılan bir JavaScript kütüphanesidir. Teknik olarak component (element) bazlı, Virtual DOM (Sanal DOM) mimarisini kullanan bir frontend kütüphanesidir.

Virtual DOM

Render edilen gerçek DOM’un bir kopyasıdır. State değiştiğinde render edilen DOM’u yeniden oluşturmak yerine bu değişiklik “Sanal DOM” a yansıtılır. Değişen sanal DOM ve gerçek DOM’un farkı alınarak sadece değişen kısımlar render edilir ve böylece her state değişiminde DOM’un yeniden oluşturulmasının önüne geçilir.

JSX

JSX, React tarafından tavsiye edilen ve React elementleri oluşturan bir JavaScript söz dizimi uzantısıdır. Kod yazımını kolaylaştırıp okunabilirliği de artırır fakat performans artışı sağladığı söylenemez. JSX ifadeleri, HTML’den daha çok JavaScript’e yakındırlar ve HTML kodlarının JavaScript içerisinde kullanılmasını sağlar.

Component

Component, uygulamayı tekrar kullanılabilir parçalar haline getirmeyi sağlar ve tekrar eden bir bileşenin bir kere yazılıp her yerde kullanılmasını sağlar. Geriye JSX döndürür ve “Class” ve “Fonksiyon” olarak 2 çeşit component vardır.

1-) Class Component

React kütüphanesindeki Component classından extend olan JavaScript classlarıdır. React Component ‘ten extend olduğu için Component Lifecycle süreçlerini de barındırır.

Class Component

2-) Functional Component

Render metoduna gerek olmadan JSX dönen JavaScript fonksiyonlarıdır.

Functional Component

State

Componentlerde değer saklamak için kullanılan JavaScript objesidir. Class Componentte doğrudan kullanılırken Functional Componentte ise hooks ile kullanılabilir. State’de bir değişiklik yapmak için setState fonksiyonu kullanılır ve ardından render metodu çalışarak component render edilir.

Props

Parent componentten Child componente aktarılabilen sabit verilerdir ve Child componentte değiştirilemezler. Bu değerlerin değiştirilebilmesi için Parent componentte değiştirilip oranın tekrar render edilmesi gerekmektedir.

Component/Prop Drilling

Proplar sadece Parent componentten Child componente aktarılabildiği için iç içe olan componentlerde en dıştaki componentten en içteki componente propları göndermek için prop tek tek bir içteki componente verilmelidir. Bu işlem “Component Drilling” veya “Prop Drilling” olarak geçmektedir. Bu sorunu çözmek için “Redux” gibi bir global state yönetim kütüphanesi kullanılabilir.

Lifecycle

React Lifecycle

ComponentWillMount

Render işleminden hemen önce çalışan event’tir. Yani Component’in gerçek DOM’a aktarılmadan önceki andır.

ComponentDidMount

Render işleminden hemen sonra çalışan event’tir. Yani Component, DOM’a aktarıldıktan sonraki andır.

ComponentWillReceiveProps

Compoentte props değiştirilme işlemi varsa o sırada çalışan event’tir. Render işleminden sonra çalışır.

ShouldComponentUpdate

State veya props değişitiğinde komponent render edilir. Bu event ile ne zaman render edilip edilmeyeceği belirlenir. Eventin geri döndürdüğü bool değere göre (true → render et, false → render etme) render işlemi gerçekleşir. Event kullanılmazsa default değer true olur. NextProps ve nextState adında 2 parametre alır ve bunlar güncellenmiş değerlerdir.

ComponentWillUpdate

ShouldComponentUpdate true değer döndürürse yani component render edilecekse çalışacak olan event. Bu event çalışacaksa önce shouldComponentUpdate sonra componentWillUpdate ve sonra da render çalışır. NextProps ve nextState adında 2 parametre alır.

ComponentDidUpdate

Yine nextProps ve nextState adında 2 parametre alır. ShouldComponentUpdate sonra componentWillUpdate ve sonra da render çalışır ve ardından componentDidUpdate çalışır.

ComponentWillUnmount

Bileşen DOM üzerinden kaldırılmadan hemen önce çalışır.

React Hooks

Class yazmadan fonksiyonlarla state ve lifecycle metotlarının kullanılmasıdır. Class Component içerisinde kullanılamaz, Functional Component içerisinde kullanılması gerekir.

State Hook

useState() bir State Hooktur. Funtional Component içerisinde state kullanmak için idealdir. Bir değişken adı ve bu değerin değiştirilmesi için fonksiyon ismi verilmelidir. UseState’e parametre verilerek değişken için default değer verilebilir. State değerini değiştirmek için belirlenen değiştirme fonksiyonu kullanılmalıdır.

Effect Hook

useEffect bir Effect Hooktur. Class componentlerdeki lifecycle metotlarıyla aynı görevi yapar. Her render işleminden sonra useEffect fonksiyonu çalıştırılır. Ayrıca bir fonksiyon return ederek component unmount olduğunda temizlenmesi istenen işler yapılabilir. Bu metot her render işleminden sonra çalışacağından bunu engellemek için bir dependency array tanımlanarak bu array içinde yer alan değerler her değiştiğinde useEffect fonksiyonu tetiklenir.

Custom Hook

Class componentler arası mantıksal işlemlerin alışverişi high order components (HOC) ve render props ile oluyor. Bunların yerine özel Hooklar kullanılabilir. Böylece kodlar daha kolay okunabilir ve componentler arası etkileşim daha hızlı sağlanır. React, custom hookların fonksiyon isminin “use” ile başlamasını tavsiye ediyor.