React’ta elementler nasıl renderlanır ?

Elementler React’ta en küçük yapı birimleridir. Bu elementler React DOM tarafından yönetilir ve React DOM gereken yerlerde DOM güncellemesini yapar.

<div id="root"></div> /* HTML dosyasında böyle bir div olduğunu varsayalım.*/

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

React genellikle tek bir root (kök) düğümü içerisinde konumlanır. Bir react elementini render edip DOM’a göndermek için öncelikle ReactDOM tarafından HTML dosyasında bulunan div gibi bir tag’e ReactDOM.createRoot() komutu ile ulaşılır. Daha sonra render etmek istenilen element root.render() şeklinde ReactDOM tarafından DOM’a gönderilir.

React elementleri render edildikten sonra immutable(değişmez) olduğundan dolayı render metodu tekrar çağırılmadan değişmez. Eğer o elementi değiştirmek istiyorsak render methodu ile tekrar çağırmamız gerekir. Birçok React uygulamalarında render methodu sadece bir kez çağırılır ve sonraki kodlar React’ın içinde bulundurduğu bileşenlerle idare edilir.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

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

setInterval(tick, 1000);

React render Kod Çıktısı

React’ı hızlı yapan en büyük sebeplerden biri DOM’da sadece içeriği değiştirilen elementleri güncellemesidir. React DOM bunu, elementleri oluşturulan bir önceki versiyonla karşılaştırıp gerekli olanı DOM’a ileterek yapar. Yukarıdaki kod ve çıktısına baktığımızda karşılaştırmada değiştirilen tek element saat kısmı olduğu için DOM’da sadece saat kısmını günceller.