Kullanımdan Kaldırıldı

Bu API, React’in gelecekteki bir ana sürümünde kaldırılacaktır.

React 18’de render, createRoot ile değiştirilmiştir. React 18’de render kullanmak, uygulamanızın React 17 gibi davranacağı uyarısını verecektir. Daha fazla bilgi için buraya bakınız.

render, bir JSX (“React düğümü”) parçasını tarayıcı DOM düğümüne render eder.

render(reactNode, domNode, callback?)

Başvuru dokümanı

render(reactNode, domNode, callback?)

Bir tarayıcı DOM düğümünün içerisinde bir React bileşeni göstermek için render’ı çağırın.

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React, <App /> bileşenini domNode içinde görüntüleyecek ve içindeki DOM’u yönetmeye başlayacaktır.

Tamamen React ile oluşturulmuş bir uygulama genellikle sadece bir render çağrısıyla kök (root) bileşene sahip olur. Sayfanın bazı bölümleri için React “sprinkles” (serpme) kullanılan bir sayfada, ihtiyaç duyulan kadar çok render çağrısı bulunabilir.

Daha fazla örnek için aşağıya bakın.

Parametreler

  • reactNode: Görüntülemek istediğiniz React düğümü. Bu genellikle <App /> gibi bir JSX parçası olacaktır; ancak bir React elemanını createElement() ile oluşturabilir, bir dize, bir sayı, null veya undefined de geçirebilirsiniz.

  • domNode: DOM elemanı. React, verdiğiniz reactNode’u bu DOM elemanının içinde gösterecektir. Bu andan itibaren, React domNode içindeki DOM’u yönetir ve React ağacınız (React tree) değiştiğinde güncellenir.

  • optional callback: Fonksiyon. Geçilirse, React bileşeniniz DOM’a yerleştirildikten sonra bu fonksiyon çağrılır.

Dönüş değerleri

render genellikle null döndürür. Ancak, verdiğiniz reactNode bir sınıf bileşeni ise, bu durumda bileşenin bir örneğini döndürecektir.

Dikkat edilmesi gerekenler

  • React 18’de render, createRoot ile değiştirilmiştir. Lütfen React 18 ve sonrası için createRoot kullanınız.

  • İlk render çağrısında, React, React bileşenini render etmek için domNode içindeki tüm mevcut HTML içeriğini siler. Eğer domNode’unuz, sunucu ya da derleme sürecinde React tarafından oluşturulan HTML içeriyorsa, mevcut HTML’e olay yöneticilerini (event handler) ekleyen hydrate() fonksiyonunu kullanınız.

  • Eğer aynı domNode üzerinde birden fazla render çağrısı yaparsanız, React, verdiğiniz son JSX’i yansıtmak için gerektiğinde DOM’u güncelleyecektir. React, DOM’un hangi kısımlarının yeniden kullanılabileceğine ve hangilerinin önceki ağaç (tree) ile “eşleştirilerek” yeniden oluşturulması gerektiğine karar verir. Aynı domNode üzerinde render çağrısı yapmak, kök bileşen (root component) üzerinde set fonksiyonunu çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır.

  • Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızda muhtemelen yalnızca bir render çağrısı olacaktır. (Bir çatı (framework) kullanıyorsanız, bunu sizin için yapabilir.) JSX’in bir parçasını bileşeninizin bir alt elemanı (child component) olmayan DOM ağacının farklı bir yerinde görüntülemek istediğinizde (örneğin, bir modal veya bir tooltip), render yerine createPortal kullanınız.

Kullanım

Bir React bileşenini bir tarayıcı DOM düğümünde görüntülemek için render’ı çağırın.

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Kök bileşeni render etmek

Tamamen React ile oluşturulmuş uygulamalarda, genellikle bunu sadece başlangıçta bir kez yaparsınız - “kök” bileşenini (root component) render etmek için.

import './styles.css';
import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Genellikle render’ı tekrar çağırmanıza veya başka yerlere çağırmanıza gerek yoktur. Bu noktadan itibaren, React uygulamanızın DOM’unu yönetmeye başlar. Kullanıcı arayüzünü güncellemek için bileşenleriniz state kullanır.

Birden çok kök oluşturma

Eğer sayfanız tamamen React ile oluşturulmamışsa, React tarafından yönetilen her bir üst düzey kullanıcı arayüzü (UI) parçası için render’ı çağırınız.

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

Render edilmiş ağaçları (trees) unmountComponentAtNode() ile yok edebilirsiniz.

Render edilmiş ağaçları güncelleme

Aynı DOM düğümünde render fonksiyonunu birden fazla kez çağırabilirsiniz. Bileşen ağacının yapısı önceden oluşturulanla eşleştiği sürece, React durumu korur. Giriş alanına yazı yazabilmeniz, her saniyede tekrarlanan render çağrılarının yıkıcı(destructive) olmadığını gösterir:

import { render } from 'react-dom';
import './styles.css';
import App from './App.js';

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

Bu şekilde birden fazla kez render çağırmak nadiren gerçekleşir. Genellikle, bunun yerine bileşenlerinizin (component) içinde state’i güncellersiniz.

PreviouspreloadModule
NextunmountComponentAtNode