React 解決了什麼問題

#新工具的出現，是為了解決既有的問題

而 React 做為一個 UI 的 JavaScript 的函式庫，它的出現便是為了解決 jQuery 以及原生 JavaScript 直接透過 DOM API 操作 DOM 時所衍生出的問題。

#那問題是什麼呢？

• 重複渲染 DOM 過於消耗效能
• 資料與畫面不一致

接下來分別說明這兩點，以及 React 是透過什麼樣的方式找到解決方案。

#重複渲染 DOM 過於消耗效能

直接操作 DOM 的方式容易造成效能上的負擔，影響特別大的就是其中兩項過程：

1. 回流（Reflow）： 計算 Render Tree 上各項元素的物理屬性，例如位置、大小。
2. 重繪（Repaint）： 將 Reflow 的計算結果轉換為螢幕上實際的像素顯示。

由於每次的 Reflow 與 Repaint 需要重新計算所有節點，並且全部重新渲染，因此在架構較龐雜的網頁中每次的互動都需要耗費相當的資源。

為了因應這種問題，React 以 Virtual DOM 來實現只更改畫面中有需要更新的元素，不必每次繪製畫面都得全部打掉重來，藉此提升效能。

#資料與畫面不一致

若直接以 JavaScript 或 jQuery 設計網頁，網頁中的畫面需透過直接操作 DOM 的方式來改變，而資料則需要另外撰寫程式來控制。如果沒有刻意設計，網頁中的資料與畫面並不會隨時保持一致，對開發者而言，更動資料的同時也必須以另外寫程式去改變畫面，在維護與管理上較不容易。

React 的核心精神，與這個問題息息相關。透過 state，讓 UI 永遠由資料產生，藉此達到資料與畫面保持一致的目的。

#可以不用 React 嗎？

雖然 React 可以解決傳統 HTML + JavaScript 的痛點，但它依舊只是一項工具，只是達到目的的千百種工具的其中一種。 不過 React 的簡單、彈性以及有著豐富的生態系可以搭配，妥善運用的話可以大大地提昇開發效率與程式的重用性，不妨就嘗試看看巨人肩膀上的風景吧。