Why React ?

綱舉目張👀

UI
DOM
React
Conclusion
Reference

UI

User Interface是現在前端工程主要面對的議題，這篇系列文談的UI以Web為主。網頁的架構由HTML組成，在靜態網站的應用上，通常由瀏覽器向某個伺服器發出一個請求(Request)，而伺服器回以HTML的文檔，瀏覽器解析文檔後就將畫面呈現在使用者面前。
而隨著網頁應用的蓬勃發展，網站上的互動越來越多，使用者可以點讚留言，或是發射彈幕等等，不可能每個操作都向伺服器請求一個新的畫面，如果按個讚畫面就需要重整的話體驗就太差了點。
解決的方式就是當使用者作出某些操作後，透過JavaScrip直接改變畫面的結構或樣式，如果我在某篇貼文下的輸入筐內打下留言並送出，JavaScript就會幫我在該篇貼文上加上我的留言，而不需要重整畫面。
而JavaScript是如何操作網頁上的結構呢？就是透過DOM了！

DOM

在Web的世界裡，UI的問題，基本上就是DOM的問題。Document Object Model是一種介面，連接文檔和程式語言。而在Web的應用上文檔通常是HTML、SVG，程式語言就是JavaScript。HTML是一種樹狀結構的標籤式語言，也因此DOM會以樹狀的方式表達畫面的結構，並提供一些API讓JavaScript可以對DOM做操作，在瀏覽器上DOM tree就是document：

const paragraphs = document.getElementsByTagName("p");
// document就是瀏覽器上操作網頁內容的介面也就是DOM Tree。
// getElementsByTagName是DOM提供的API，用以取得網頁上所有的<p>tag。

瀏覽器上的DOM主要都是由JavaScript實作的，不同的瀏覽器有不同的實作方式，但可以確定的是瀏覽器會讓你可以透過JavaScript操作DOM，也就是說幾乎所有的瀏覽器都可以在畫面載入完成後透過document取得網頁的內容。

簡而言之，當我們要透過JavaScript改變UI時，必須要操作DOM。

React

而React這個UI library，主要就是要解決DOM的問題。當應用程式變得龐大後，直接操作DOM會變得複雜且難以維護，因此React提供了一種不同的方式來管理和維護UI。簡單來說呢，只要告訴React：“在某個狀態下，畫面要是什麼樣子” 然後React就會幫忙處理所有DOM的操作。至於如何處理呢？就是之後再寫了XD