基本概念

段落

我們是如何使用 JavaScript 讓網頁畫面產生互動呢？

  1. 選取 DOM 元素
  2. addEventListener 綁定元素，監聽點擊、滑動等使用者的行為
  3. 如果偵測到該元素觸發了監聽的行為，就執行對應的程式

設定越來越多監聽，程式碼就會變得繁雜，也會感覺到畫面更新開始延遲，且常常會出錯，即使只是慢了 0.1 秒也是明顯的體感。

撰寫按鈕 A 的事件，可能會需要新增 B 區塊，而 B 區塊的內容又有其他互動事件會產生 C 或 D 元素等，一層又一層的衍生，不僅同時操作很多 DOM 元素，不斷嵌套的程式碼也會造成追蹤困難，很難梳理問題的來源。

前端框架的目標是強調資料模型的操作，形成一個容易追溯的資料流，以減少手動管理 DOM 帶來的問題。

Virtual DOM

DOM 本身是一個樹狀資料，以往會用 innerHTML 來替換 DOM 節點之下的全部畫面。而 React 設計了 Virtual DOM 與比對演算法，來精準更新資料有變動的 DOM 節點。

React 會先產生一個新的 Virtual DOM，再與舊的 Virtual DOM，定位出所有會被此資料影響的 DOM 節點，再更新到瀏覽器的 DOM，減少大量操作 DOM 帶來的重繪效能耗損。

例如：當 count 從 0 變成 1 時，真實的 DOM 最終只有 <p> 被改變：

function App() {
  const [count, setCount] = useState(0);


  return (
    <div>
      <h1>Hello</h1>
      <p>{count}</p>
    </div>
  );
}
資訊

React 底層運作最終還是會執行 DOM 的操作，只是讓我們更精準地管理每個 DOM 元素之間的關係，不代表 React 會讓程式效能突飛猛進。

開發彈性

React 的撰寫沒有太多硬性慣例，但也沒有太多開箱即用的功能，所以經常要搭配其他套件來完善整體功能。

初學需多嘗試各種練習題來熟悉 React 的運作流程，這點我覺得現在的 React 官網做得蠻好的，在 Learn 頁面的各章節都會附上一些練習題。

了解基本語法後可以實作 To-Do List 等經典範例，來認識常用套件，像是 React Hook Form、React Router、Redux 等，藉此熟悉整個生態圈。

學習路徑

個人覺得初期目標可以放在：

  1. 了解 React 與原生 JS 整體操作 DOM 的流程差異
  2. useState 與 useEffect 的基本用法
  3. 嘗試經典範例
  4. 熟悉其他 hook 和常用套件
  5. 接 API 或其他第三方服務

　參考資料