Virtual DOM (VDOM) คือต้นไม้ของวัตถุ JavaScript ที่เบาซึ่ง อธิบาย ว่า UI ควรมีลักษณะเช่นไร มันเป็นตัวแทนอยู่ในหน่วยความจำเท่านั้น — ไม่ใช่ DOM ของเบราว์เซอร์จริง React ใช้มันเพราะ การจัดการ DOM จริงโดยตรงนั้นช้า และการทำมันด้วยตนเองทุกครั้งที่สถานะเปลี่ยนจะเสี่ยงต่อข้อผิดพลาด
เมื่อสถานะเปลี่ยนแปลง React ไม่ได้สัมผัสหน้าเพจทันที แต่แทน:
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>;
}
ดังนั้นคุณจึงเขียนโค้ด อย่างประกาศ ("UI มีลักษณะ นี้ สำหรับ สถานะ นี้") และ React จะหาวิธีการดำเนิน DOM ให้คุณ
document.querySelector ด้วยตนเอง + กลายพันธุ์