幾年前曾經簡單玩過 HTML 與 CSS，那是個 jQuery 很紅的年代，去年重新學習前端，才發現主流工具變成了 React、Vue 和 Angular 三大框架。當中，React 和 Vue 都會用到一個叫 Virtual DOM 的技術概念。
查了一些評價後，我決定先試試 Vue，畢竟大家都說 Vue 的學習曲線相對平緩，但試了後發現 Vue 有好多模板語法喔，寫起來不是很喜歡，於是我轉而嘗試 React，發現寫 JSX 就像是寫 HTML 一樣，開發起來更舒服。
後來我還看了 React 的紀錄片，進一步了解了這個框架背後的設計理念。一開始在構想 React 時，Facebook 工程師們討論該如何處理網頁要更新的地方，這包括了像是怎麼做狀態管理與重新渲染。他們設計了像 Flux 這樣的架構，用來管理應用程式中所有資料的流動方式。了解這些背景故事後，我發現自己深深被 React 的設計哲學所吸引，那或許就是喜歡上 React 的瞬間～ ❤️
Virtual DOM 是什麼？
Virtual DOM 是一種程式設計上的技術，目的是讓網頁更有效率地更新畫面。實際上，當我們改變畫面上的內容時，網頁會進行許多複雜的計算。如果直接修改網頁的結構（稱為 DOM），效率會很差。
Virtual DOM 的做法是先建立一個虛擬的網頁結構，當我們要改變畫面時，先改這個虛擬結構，再和舊的虛擬結構比對出差異，最後只更新需要改變的部分。這樣可以避免重複操作網頁結構，提升效能。
Vue 的模板語法與 React 的差異
Vue 的模板語法（像是 v-for、v-if）看起來像特別設計的指令，這是因為 Vue 在處理畫面更新時，會透過這些指令來進行更多優化。它們幫助 Vue 提前在建構過程中進行優化，所以看起來很像是在學一個新語法。
而 React 則是使用 JavaScript 語法來撰寫畫面邏輯，透過 JSX 語法讓我們像寫 HTML 一樣編寫程式碼。這樣的設計讓程式碼和邏輯更靈活，但深入瞭解後會發現坑很多 :)
JSX 是什麼？
JSX 是 React 提供的特殊語法，表面看起來像是在 JavaScript 裡直接寫 HTML。實際上，它只是語法糖（Syntax Sugar），讓開發者能更直覺地描述畫面的結構。
JSX 最終會被轉換成 JavaScript 程式碼，生成 React 的元素（React Element）。這些元素會用來建立 Virtual DOM 並進行後續的畫面更新。換句話說，JSX 只是讓我們在寫程式時看起來比較像 HTML，但背後仍然是 JavaScript 處理的過程。
狀態管理（State Management）
比如按鈕按了幾次、輸入框的內容是什麼，管理這些狀態是很重要的工作，當狀態變化時，React 會根據新的狀態來重新渲染畫面。
重新渲染（re-render）
當元件（component）的狀態或資料變化時，React 會根據新的狀態重新「畫」這個元件，但它不會重新畫整個網頁，而是只更新需要改變的部分。這就是 Virtual DOM 和 Re-render 的精髓所在，讓畫面更新變得快速而高效。
Flux
Flux 是一種設計模式，目的是讓資料在應用程式中能夠更有條理地流動。它提倡一種「單向資料流」的設計，也就是資料只會沿著一個方向流動，這樣更容易追蹤資料的變化。
想像一下，一個消息從上層傳到下層，而不是上下來回交互，這樣可以避免資料混亂，讓狀態變更更加清晰可控。
iThome鐵人賽
看影片追技術