Tidak Digunakan

API ini akan dihapus di versi utama React yang akan datang.

Pada React 18, render digantikan oleh createRoot. Menggunakan render pada React 18 akan memperingatkan bahwa aplikasi Anda akan berperilaku seolah-olah menjalankan React 17. Pelajari lebih lanjut di sini.

render me-render bagian dari JSX (“Simpul React”) ke dalam simpul DOM peramban.

render(reactNode, domNode, callback?)

Referensi

render(reactNode, domNode, callback?)

Panggil render untuk menampilkan komponen React di dalam elemen DOM peramban.

import { render } from 'react-dom';

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

React akan menampilkan <App /> di dalam domNode, dan mengambil alih pengelolaan DOM di dalamnya.

Sebuah aplikasi yang sepenuhnya dibangun dengan React biasanya hanya akan memiliki satu pemanggilan render dengan komponen akarnya. Sebuah halaman yang menggunakan “campuran” dari React untuk beberapa bagian dari halaman dapat memiliki panggilan render sebanyak yang dibutuhkan.

Lihat contoh lebih lanjut di bawah ini.

Parameter

  • reactNode: Sebuah React node yang ingin Anda tampilkan. Ini biasanya berupa bagian dari JSX seperti <App />, tetapi Anda juga dapat mengoperkan sebuah elemen React yang dibangun dengan createElement(), sebuah string, sebuah number, null, atau undefined.

  • domNode: Sebuah elemen DOM. React akan menampilkan reactNode yang Anda berikan di dalam elemen DOM ini. Mulai saat ini, React akan mengelola DOM di dalam domNode dan memperbaruinya ketika pohon React (React tree) Anda berubah.

  • opsional callback: Sebuah fungsi. Jika dilewatkan, React akan memanggilnya setelah komponen Anda ditempatkan ke dalam DOM.

Kembalian

render biasanya mengembalikan nilai null. Namun, jika reactNode yang Anda berikan adalah sebuah komponen class, maka ia akan mengembalikan sebuah instance dari komponen tersebut.

Peringatan

  • Pada React 18, render digantikan oleh createRoot. Silakan gunakan createRoot untuk React 18 dan seterusnya.

  • Pertama kali Anda memanggil render, React akan menghapus semua konten HTML yang ada di dalam domNode sebelum me-render komponen React ke dalamnya. Jika domNode Anda berisi HTML yang dihasilkan oleh React di server atau selama proses membangun, gunakan hydrate() sebagai gantinya, yang akan melampirkan event handler ke HTML yang ada.

  • Jika Anda memanggil render pada domNode yang sama lebih dari satu kali, React akan memperbarui DOM seperlunya untuk merefleksikan JSX terbaru yang Anda berikan. React akan memutuskan bagian mana dari DOM yang dapat digunakan kembali dan mana yang perlu dibuat ulang dengan “mencocokkannya” dengan pohon (tree) yang sebelumnya di-render. Memanggil render berkali-kali pada domNode itu serupa dengan memanggil fungsi set pada komponen root: React menghindari pembaruan DOM yang tidak perlu.

  • Jika aplikasi Anda sepenuhnya dibangun dengan React, kemungkinan besar Anda hanya akan memiliki satu pemanggilan render dalam aplikasi Anda. (Jika Anda menggunakan framework, framework tersebut mungkin akan melakukan pemanggilan ini untuk Anda.) Ketika Anda ingin me-render sebuah bagian dari JSX di bagian yang berbeda dari pohon DOM (DOM tree) yang bukan merupakan turunan dari komponen Anda (misalnya, sebuah modal atau tooltip), gunakan createPortal sebagai pengganti render.

Penggunaan

Panggil render untuk menampilkan komponen React di dalam simpul DOM peramban.

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

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

Me-render komponen akar

Pada aplikasi yang sepenuhnya dibangun dengan React, Anda biasanya hanya akan melakukan hal ini sekali saja pada saat memulai - untuk me-render komponen “akar” (*the root componen

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

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

Biasanya Anda tidak perlu memanggil render lagi atau memanggilnya di banyak tempat. Mulai saat ini, React akan mengelola DOM aplikasi Anda. Untuk memperbarui UI, komponen Anda akan use state.

Me-render beberapa akar

Jika halaman Anda tidak sepenuhnya dibangun dengan React, panggil render untuk setiap bagian teratas dari UI yang dikelola oleh React.

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

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

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

Anda dapat menghancurkan pohon yang di-render dengan unmountComponentAtNode().

Memperbarui pohon yang di-render

Anda dapat memanggil render lebih dari satu kali pada simpul DOM yang sama. Selama struktur pohon komponen sesuai dengan apa yang sebelumnya di-render, React akan mempertahankan state Perhatikan bagaimana Anda dapat mengetik masukan (input), yang berarti pembaruan dari pemanggilan render yang berulang-ulang setiap detiknya tidak bersifat destruktif:

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);

Tidak umum untuk memanggil render beberapa kali. Biasanya, Anda akan update state di dalam komponen Anda.

SebelumnyapreloadModule
SelanjutnyaunmountComponentAtNode

Seberapa suka Anda dengan dokumentasi ini?