React JS Giriş, Component ve Virtual DOM Mimarisi

Bugün sizlere temel olarak React ile ile ilgili derlemiş olduğum birkaç bilgiyi paylaşacağım. Umarım okuyan herkese faydalı olur 🙂

Haydi Başlayalım !

Maddelerle React

  • React, kullanıcı arayüzleri oluşturmak için Facebook tarafından geliştirilen bir Javascript kütüphanesidir. Bu kütüphane oldukça esnek bir kütüphanedir.
  • React, View katmanı ile ilgilenmektedir.
  • React, Virtual DOM’u kullanmaktadır.
  • JQuery veya Javascript geliştirirken gerçek DOM üzerinden işlem yapılmaktadır. Real Dom’da değişiklik olmayan yerlerde tekrardan taranır ve render edilir. Ancak React Virtual Dom mimarisini kullanarak sadece değişikliğin olduğu yeri tekrar render eder.
  • React Component tabanlıdır.
  • ES6 Javascript’in 2015’ten sonra gelen standartlarını kullanmaktadır. 2016’ dan önce Class yapıları bulunmuyordu. Prototype’lar ile bu durumlar hallediliyordu.
  • React JSX Formatını kullanmaktadır. Javascript’in içerisinde HTML yazılmasını sağlayan bir formattır.

Component Mantığı

  • Component yapısı sayesinde tekrarlamalardan kaçınılmaktadır.
  • Yapılar Class haline çevrilir.
  • Veriler State veya Props olarak gönderilir.
  • Bir yerde yazıldıktan sonra her yerde kullanabilme imkanı sunar.
  • Componentler kişisel tercihinize göre mantıksal parçalara bölünebilir.
  • React’te performans olarak yüksek performanslara sahip olunmasının sebebi; sürekli render edilme durumu yoktur. Yani, sayfanın komple olarak render edilme durumu bulunmamaktadır. Bu nedenle performans olarak hızlıdır.

Virtual Dom Nedir ?

  • Virtual Dom sanal bir Dom’dur. Aslına bakarsanız, Gerçek Dom’un bellekteki kopyasıdır.
  • Document Objeleri Key-Value olarak bulunur.
  • Güncelleme anında ;( web sayfasında veri güncellenmesi gibi.) . Bu veri Virtual Dom’a gitmektedir. Bu Virtual Dom aynı anda kendi Snapshot’unu oluşturur.
  • Snapshot yani güncellenmiş hali ve güncellenmemiş hali 2 adet Virtual Dom arasında gerçekleşir. Bu değişiklik Virtual Dom’dan Real Dom’a yansımaktadır.
  • React’ın Virtual Dom’u sayesinde performans artmaktadır.
  • State değiştiğinde; Virtual Dom’da güncellenme olmaktadır. Virtual Dom’un Snapshot’u alınır. Hangi objenin güncelleneceği ve değişeceği ise DIF algoritması ile gerçekleşir.

Özetle ;

  • Componentlerin Stateleri değiştiğinde bu Virtual Dom’a yansır.
  • Bundan önce zaten Virtual Dom kendi SnapShot’unu oluşturmuştur.
  • Aynı anda iki Virtual Dom vardır.
  • Aradaki farkların çözülmesi için ise ; React, Diff algoritmasını kullanmaktadır.
  • İki Virtual DOM arasındaki değişiklik , Real DOM’a da yansımaktadır.
  • Real DOM Batch Update yapmaktadır. Yani belli bir süre ; birden fazla Component’in stateyi değişiyorsa, aslında bunu bekliyor ve daha sonra yansıtıyor demektir. Bu işlemlerin tekrar tekrar yapılması gerekmemektedir. (Bence en sihirli kısım da burası 🙂 )

Şimdilik bu kadar , en kısa zamanda görüşmek üzere 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir