Virtual DOM (VDOM) ialah pokok objek JavaScript yang ringan yang menggambarkan bagaimana UI sepatutnya kelihatan. Ia adalah perwakilan biasa dalam memori — bukan DOM pelayar sebenar. React menggunakannya kerana memanipulasi DOM sebenar secara langsung adalah perlahan, dan melakukannya secara manual pada setiap perubahan keadaan adalah rawan kesilapan.
Apabila keadaan berubah, React tidak segera menyentuh halaman. Sebaliknya ia:
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
Jadi anda menulis kod secara deklaratif ("UI kelihatan seperti ini untuk keadaan ini") dan React mengira operasi DOM imperatif untuk anda.
document.querySelector + mutate.