Component (Bileşen) Nedir?
Bir odanın içine koltuk, televizyon, sehpa ve halı gibi elemanları yerleştirdiğinizi düşünün. Bu elemanların her biri kendi başlarında bir görevi yerine getiren componentlerdir. Bu componentlerin bulunduğu oda muhtemelen oturma odası componentidir. Bu şekilde örnekleri çoğalttığımızda kendi içerisinde mini görevleri yerine getiren componentlerin oluşturduğu oda componentleri (mutfak, yatak odası vb.) olacaktır. Sonuç olarak bunların hepsi bir araya geldiğinde ev meydana gelecektir.
Birde buna teknik anlamda bakalım. Madem React’i Facebook yaratmış bunu sitesinden bir görsel üzerinden anlatayım.
Örneğin 2 numaralı alanı sağdaki gri alanda veya başka bir sayfada kullanmak istiyoruz. Bunu eski yöntemle yapmaya kalksak 2 numaralı alanın html kodlarını alıp, kullanacağımız yere aynı kodları kopyalamamız gerekir. Ancak bu durum, sonradan 2 numaralı alanda bir geliştirme yapmaya kalktığımızda kullandığımız her yerde o değişikliği tek tek üzerine kopyalarak değiştirmemiz gerekir. Componentler işte bizi bu iş yükünden kurtulmamızı sağlar. 2 numaralı alanı “FindFriendsComponent” adında bir componentin içinde bir kere geliştirme yaparak, ilgili yerlerde sadece
şeklinde çağırarak kullanabiliriz.
import React, { Component } from 'react';
import News from '../component/News';class Home extends Component {
render() {
return (
);
}
}export default Home; Örnek 1: Component kullanımı
Yukarıdaki örnekte Home adında bir componentin içinde News adında başka bir component çağılıyor.
DOM & Virtual DOM
DOM (Document Object Model) web sayfalarının bize görünmelerini sağlayan html elemanlarının hiyerarşik biçimde bir arada bulunmasıdır. Virtual(sanal) DOM ise React tarafından render edilen DOM’un bir kopyasının tutulmuş halidir. Kısaca aralarındaki fark şudur; normalde sayfa içerisinde bir değişiklik talep ettiğinizde DOM bütün html’i tarar ilgili yerdeki değişikliği yapar. İyi güzel de; talebiniz aynı olsa bile bu baştan yükleme işlemi her seferinde tekrar gerçekleşir. Bu da gereksiz bir iş yüküdür.
Ancak, React devreye girdiğinde bir state (durum) değişikliğinde tüm sayfayı baştan yüklemek yerine DOM’daki değişikliği Virtual DOM a yansıtır ve render (derlemek) edilen DOM ile farklılıklarına bakar ve sadece farklılık olan alanı render eder. Bunun güzel tarafı yapılan değişiklik bir öncekiyle aynıysa render işlemi gerçekleşmez. Taa ki gönderdiğiniz değişiklik farklı olana dek.
Her projede React kullanmak mantıklı değildir. Sürekli ekranda veri değişiminin olduğu alanlarda kullanılması daha mantıklıdır.