React思維進化：一次打破常見的觀念誤解，躍升專業前端開發者（iThome鐵人賽系列書）

27/08/2025 陳泓毓整理

註: 中心的專案是Next.js專案，不是純的React專案。(可以從package.json辨別)

DOM

DOM 全名 Document Object Model（文件物件模型）。

它是一種「把 HTML 文件轉換成可以用程式操控的物件結構(樹狀的資料結構)」的方式。

什麼是DOM?

• 把 HTML 想像成「蓋房子的設計圖」（寫死的文字）。
• DOM 就是「蓋好後的房子裡的東西」，每個房間、家具都可以被搬動、換顏色。
• JavaScript 就像「房子的主人」，可以改變牆壁顏色（CSS）、新增家具（元素）、刪掉東西。

早期的前端工程，都是html寫好之後dom要重新渲染一次，但隨著網路越來越發達，互動越來越多的網站，要整個重新渲染一次DOM太浪費成本，所以開始採用Virtual DOM (虛擬DOM)

React: Virtual DOM

React的背後核心運作 → Virtual Dom，會根據畫面需求建立草稿，再由react(前端框架)轉換成瀏覽器看得懂的DOM。

而Virtual DOM 的運作原理就是透過 新舊Virtual Dom比較，找出差異，讓瀏覽只需要渲染差異的**節點(element)**就好。

<aside> 💡

範例:

當你透過 React.creatElement() 建立物件時，react會自動轉譯成HTML5

</aside>