render
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 dengancreateElement()
, sebuahstring
, sebuahnumber
,null
, atauundefined
. -
domNode
: Sebuah elemen DOM. React akan menampilkanreactNode
yang Anda berikan di dalam elemen DOM ini. Mulai saat ini, React akan mengelola DOM di dalamdomNode
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 olehcreateRoot
. Silakan gunakancreateRoot
untuk React 18 dan seterusnya. -
Pertama kali Anda memanggil
render
, React akan menghapus semua konten HTML yang ada di dalamdomNode
sebelum me-render komponen React ke dalamnya. JikadomNode
Anda berisi HTML yang dihasilkan oleh React di server atau selama proses membangun, gunakanhydrate()
sebagai gantinya, yang akan melampirkan event handler ke HTML yang ada. -
Jika Anda memanggil
render
padadomNode
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. Memanggilrender
berkali-kali padadomNode
itu serupa dengan memanggil fungsiset
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), gunakancreatePortal
sebagai penggantirender
.
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.