大綱

• 前言
• React 的介紹

前言
咦，主題是 JavaScript 怎麼寫一寫變成 React 了 !!??

這個嘛......其實都是為了工作，在開發下一個系統時，我的主管說了，要使用 React 來開發，我真心覺得很好啊，以現在這個時代來講，其實很難區分『前端工程師』或者是『後端工程師』對我們 Rails 工程師而言，更是很難區分，因此最基本的從 HTML、CSS、JavaScript、jQuery，然後就看公司及主管的需要，選擇前端三大框架的其中一種，這應該是現在工程師絕對要會的，雖然乍看之下好像很多，可是每天碰一點寫一點學一點，一點一滴就會了，畢竟在工作時所承受的壓力，都會化成學習的動力而成長。

就繼續變強吧，接下來我會分享學習 React 的心得過程，再請各位多多指教了。

React 的介紹：背景
React 一開始是 Facebook 的一個 PHP 框架的接口 (port)，叫做 XHP。作為一個 PHP 框架，XHP 是為了在每次請求送出時為我們渲染整個頁面。React 的誕生是為了把 PHP 風格的重渲染整個頁面的工作流程帶到用戶端應用程式。

React 本質上是『狀態機 (state machine)』，幫助開發人員管理隨時間改變的狀態的複雜性。它透過專注於一個非常小的領域來實現這一點。它只關心兩件事：

1. 更新 DOM
2. 回應事件

React 不管 AJAX 、路由 (routing)、儲存、或資料結構。它不是一個模型 - 視圖 - 控制器 (Model - View - Controller) 框架 ; 硬要講的話，它是 MVC 中的 V。這個狹小的領域讓我們可以自由地使用 React 和各種系統配合。事實上，它已經被幾個流行的 MVC 框架用來渲染視圖。

由於讀取和更新 DOM 的性能損耗，每次一些狀態改變便渲染整個頁面在 JavaScript 中是非常緩慢的。React 有著一個使用虛擬 DOM 的強大渲染系統，導致在 React 中只需更新 DOM 而不用從 DOM 讀取。

就像高性能的 3D 遊戲引擎，React 建基於渲染函式，這些函式取得全部的狀態，並翻譯成最終頁面的虛擬具像 (representation)。每當 React 收到狀態變更的通知，便會再執行那些函式以決定該頁面的新虛擬具象，然後自動把結果翻譯成必要的 DOM 的改變以反應新的畫面。

乍看之下，這比起一般的 JavaScript 方法，也就是按需更新每一個元素，來得要慢。然而，React 有著非常高效的算法，用以決定當前虛擬頁面的具象和新頁面的差異。根據這些差異，它可以對 DOM 作出最低的必要更新。

這當中的性能優勢在於，它最小化回流 (reflow) 以及不必要的 DOM 變更，這兩者都是常見的性能殺手。

然而，我們的專案系統越大型，便越可能會出現觸發更新的互動，而這個更新會觸發另一個更新，進而再觸發另一個。當這些聯動式的更新未能正確地處理時，性能便明顯下降。更糟糕的是，有時 DOM 元素在到達最終狀態前就更新了好幾次。

React 的虛擬具象對比不僅透過每次執行最小量的更新來最小化這些問題，它也簡化應用程式的管理。當狀態根據使用者的輸入或外部的更新而改變時，我們只要簡單地通知 React 這些改變，React 會自動幫我們處理剩下的一切。就不需要深入管理其中的過程。

React 對整個應用程式使用單一的事件處理器並將所有事件指派到這個事件處理器。這也有助提升 React 的性能，因為存在大量的事件處理器會導致嚴重的性能損耗。

最後，送各位一首歌 ~~