多想一下，或許這個專案不需要用ReactJS。

自從進度條開始打Facebook廣告後，

小編的Facebook也很常出現無論是國內還國外的文章或廣告，

前一陣子ES6這個名詞也一直出現，當然也有很多同學詢問我們課程是否會包含ES6。

 

 

 

目前進度條已經有在進行ReactJS的課程了，有興趣的話可以參考
ES6, ReactJS與Webpack，前端JavaScript全攻略

 

 

不過在詳細看影片學習前，還是先寫簡單介紹一下ReactJS 、JavaScript、jQuery與AJAX在實務上的運用，讓大家知道到底發生了什麼事。

 

 

 

React為Facebook提出的程式架構，利用JavaScript ES6與Bable編譯器為基底。React家族已經相當龐大，除了ReactJS寫前端外，還有React Native可以用來寫手機程式，正所謂一鴨雙吃，啊不對，應該是一箭雙鵰讓人覺得似乎學會了就無敵了，距離寫作業系統也不遠了吧。

 

 

 

看到這你可能會想說，標題這麼負面，不是應該要好好的鞭React嗎？

其實不是的，我想要表達的只是並不是所有情況都是用ReactJS就好棒棒。

但這裡我想從jQuery 和 AJAX開始講起。

 

 

 

AJAX，Asynchronous JavaScript And Xml(非同步JS與XML)

聽起來好像很神秘很帥，不會它好像就不會寫網頁似的，

(但這是事實，畢竟現在Single page website當道)

 

其實就本質上，AJAX的目的是:

 

不需要跳頁就可以跟後端送或要資料。

 

像這種瀏覽器會動到硬體裝置的動作，一定是利用JavaScript特定的Libary。因為送資料到後台這個動作必須要驅動網路卡。

 

所以他的順序會是 JS函式庫 => Browser => 應用程式層Driver API => 系統層Driver API => 網路卡(硬體) => “發送資料”

(偷渡一些網路與機算機概論的東西，如果看不懂的話就只要記得通常都是需要使用特定函式才能驅動硬體，

如果有興趣這裡推薦Linux Network 網路程式設計這本書(已停產？)，當然類似標題的書應該都有教相同的概念)

 

 

 

以AJAX來說，我們用的是 XMLHttpRequest() 這個Object。

他被jQeury包裝成$.ajax() 這個函數，當然無論是哪個都可以實現，只是通常jQuery方便些。

 

 

 

 

假設我們使用了$.ajax()去跟後台要資料，後台會回應我們一段資料，這筆資料可以是任何型態，可以是純文字、HTML、XML、圖檔、或是現在最常見的JSON，甚至可以混雜著傳，沒有人會管你，除了你的主管以及你的同事，因為後台你做的然後亂傳的話他們會很痛苦。

 

 

通常在回傳(Response)的檔頭他會說他是什麼資料型態(例如 JSON =>  application/json )，但他也可以說他是JSON結果裡面是HTML，這種牛頭不對馬嘴的事情其實也不算少見(當然是錯誤示範)。

 

 

 

 

 

我們這邊就來一個狀況劇，

假設你這邊有一個需求，要求用一個Table表記錄所有訂單當下的狀態。

你們公司還算忙碌，所以不只一台電腦再更改這個表，

不過這個表的即時性沒那麼高，你負責的部分每5分鐘更新一次就可以了，

所以你就用PHP 或 Rails 或 C# 或不管你用什麼後台程式語言搭配HTML，

在網頁顯示的時候畫出這個表，

再使用JS的計時器(setinterval)搭配AJAX，每5分鐘跟後台要資料。

 

 

這時你有幾個選擇，直接叫後台用新的資料畫出HTML回傳，這時你只需要整個Table覆蓋掉就可以了。

第二個選擇，你可以回傳JSON，在很辛苦的用JS DOM createElement()一個一個畫出來，通常至少30行程式碼以上。

 

 

 

如果你偏好第一個方法，多半會被退件，因為HTML資料量比JSON大得多，而且彈性不夠。

不過資料量我覺得現在網路都很快，一點都不是問題，主要問題是彈性不夠，被HTML包住的話，

對個別資料做運算、組合是比較不方便。但這方法的好處是可以共用後台畫出HTML的程式碼(HTML都在後台產生)。

 

 

 

第二個方法是主流，在第一次顯示表格的時候用後台程式語言畫出來，

第二次以後就是用JavaScript的方式來重新畫出來。缺點就是每次碰到這種問題，都要寫兩次程式碼。

一次是用後台程式語言，另外一次是用JavaScript。

非常麻煩，如果資料結構改的話，兩邊都要改，而且createElement() \ appendElement() 實在是不直覺。

 

 

 

因此有人就想出來第三個方法。

一開啟網頁的時候不用後台程式語言畫出表格，而是網頁一準備好就AJAX，從第一次開始就使用JavaScript畫。

缺點是會多一次Request，但這不是什麼大問題。不過這一樣沒辦法解決DOM不直覺的問題。

 

 

 

這邊就連到了React, 在React裡提出了另外一種格式，叫JSX。

他的寫法可以把HTML直接跟JavaScript混合，看起來比較直觀。

關於HTML就直接用HTML寫，JavaScript現在則是使用ES6的語法。

(在今年2017以前，官網上的範例都還是ES5)

所以在這個案例上，寫起來就會比較直覺，但好不好維護就見仁見智。

 

 

 

 

好！可以開始學React了，什麼時候開始上課！

 

啊...先別著急，React除了這個案例的好處外，還有其他好處，同時也是麻煩的地方。

首先瀏覽器還不支援 ES6 與 JSX，所以必須要編譯過才能使用，就像Sass一樣。現在主流的編譯軟體是Webpack，說實話，它不算是很親民，搞懂它就需要費一些時間。而且React 要求把所有的功能都模組化，在模組化下，如何使用JavaScript就又是另外一件事。

(並不是指做成Object 或是 Class)

再來React 還有他自己的資料管理與生命週期(Life cycle)，學習這也需要一些時間，並且會有些限制，

在React裡面，它把資料統一管理，有某種程度上的限制，讓初學React的人很頭痛，資料無法輕易更改。

在React這些限制下完成程式可以讓你的網站互動性與即時性大幅增加，網站程式碼管理也比較容易。

但如果你的網站根本就沒有互動性與即時性的需求，使用React只會讓你多寫很多程式碼，

 

 

 

 

 

另外的缺點是目前所有前端架構都有的問題，可能會退流行，就像是Angular爆紅到銳減，

中間也不過 1 年的時間。就算他是Google的也一樣。

而且React還是持續在更新，像小編2016寫的程式碼用現在版本的JSX編譯器會出現一大堆警告，叫我用ES6語法。

不過工具就是拿來用的，只要基礎打好的話，就算換了工具其實也不真的會影響太大！

 

 

 

 

 

最後要提到現在當紅的前端架構 ReactJS , Vue.js的簡易看法。

小編個人是覺得ReactJS會活比較久，因為現在生態系比較完整，以全球來說還是市佔率最高的。

 

 

Vue.js是大陸人做的，勢單力薄，所以即使目前很紅，但我並沒有那麼看好。

Vue.js有一個比較少人注意到的特點，就是他是大陸人寫的，非英語母語。

所以語法上面不會有很多又臭又長函數名，也偏好用縮寫表示。

就算有，用的單字也比較簡單。不過VueJS目前的市佔率雖高，但主要還是以華語區為主就是了。

 

 

 

所以結論就是，用React有很多好處，小編自己也很愛用。

但是如果專案很簡單，會讓開發週期變長很多，而且沒任何好處還有壞處。

(本來菜鳥練習等級，突然變成沒個40~50k找不到人維護。)

新技術也很容易一直改變，這都是做一個專案需要事前仔細評估的項目。

 

 

最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!!