Elementlerin Render Edilmesi

Elementler, React uygulamalarının en küçük yapı birimidir.

Bir element, ekranda neyi görmek istiyorsanız onu tasvir eder:

const element = <h1>Hello, world</h1>;

Tarayıcının DOM elementlerinin aksine, React elementleri daha sade nesnelerdir ve oluşturulmaları daha kolaydır. Çünkü React DOM, elementler ile eşleşmek için DOM’un güncellenmesi işini kendisi halleder.

Not:

“Bileşen” (component) konsepti daha yaygın olarak bilindiği için, anlam bakımından elementler ile karıştırılabilir. Sonraki bölümde React bileşenlerine de değineceğiz. Fakat elementler, React bileşenlerinin en küçük yapıtaşlarıdır. Bu nedenle sonraki bölüme atlamadan önce bu bölümü okumanızı tavsiye ederiz.

Bir Elementin DOM’a Render Edilmesi

HTML dosyanızın herhangi bir yerinde <div> olduğunu düşünelim:

<div id="root"></div>

Buna “root” (kök) düğüm denir. Çünkü içerisindeki her şey React DOM tarafından yönetilir.

Genellikle React ile yazılan uygulamalar, sadece bir adet kök DOM düğümü içerirler. Eğer React’i mevcut uygulamanıza entegre ediyorsanız, birbirinden izole olacak şekilde dilediğiniz kadar kök DOM düğümüne sahip olabilirsiniz.

Kök DOM düğümü içerisinde bir React elementini render etmek istiyorsanız, bu iki parametreyi de ReactDOM.render() metoduna geçirmeniz gereklidir:

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Try it on CodePen

Sayfada “Hello, world” mesajı görüntülenecektir.

Render Edilmiş Elementin Güncellenmesi

React elementleri immutable‘dır. Yani bir kez React elementi oluşturduktan sonra, o elementin çocuklarını veya özelliklerini değiştiremezsiniz. Bu nedenle element, bütün bir videonun tek bir karesi gibidir: arayüzün belirli bir andaki görüntüsünü temsil eder.

Bu zamana kadar edindiğimiz bilgiler ışığında, kullanıcı arayüzünün güncellenmesi için tek yolun, yeni bir element oluşturup, ReactDOM.render() metoduna aktarmak olduğunu biliyoruz.

Aşağıdaki saat örneğini ele alalım:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Try it on CodePen

setInterval() metodu ile her saniye bitiminde ReactDOM.render() metodu çağrılıyor.

Not:

Genelde birçok React uygulamasında ReactDOM.render() yalnızca bir kez çağrılır. Sonraki bölümlerde bu tarz kodların nasıl state’li bileşenlere dönüştürüleceğine değineceğiz.

Her bir konu diğeri için zemin hazırladığından dolayı, bu konuları atlamamanızı öneririz.

React Yalnızca Gerekli Kısımları Günceller

React DOM, ilgili elementi ve elementin çocuklarını, bir önceki versiyonlarıyla karşılaştırır. Farkları tespit ettikten sonra yalnızca gerekli olan kısımlarda DOM güncellemesi yapar. Bu sayede DOM, istenen duruma getirilmiş olur.

Tarayıcı araçlarını kullanarak son örneği incelediğinizde de bu durumu görebilirsiniz:

DOM inceleyicisi küçük güncellemeleri gösteriyor

Oluşturduğumuz element, her saniyede bütün UI ağacını görüntülemesine rağmen, React DOM tarafından yalnızca ilgili metin düğümü ve bu düğümün içerikleri güncelleniyor.

Deneyimlerimizden yola çıkarsak, kullanıcı arayüzünün zaman içerisinde nasıl değiştirileceğinden ziyade herhangi bir anda nasıl görünmesi gerektiğini düşünmek birçok hatanın oluşmasını engellemektedir.