當我走進這個著名的咖啡館，這裡已經有很多人了，我環顧四周，看到遠處的JSP同學和ASP同學正聊得火熱，他倆，還有今天沒看見的Velocity同學每次都會佔據最裡邊的座位，似乎故意要逃避大家。

從他們的表情看，我就能猜出來這兩個傢伙又在抱怨人心不古，世風日下，沒有程序員使用他們了。

旁邊是jQuery和ExtJS， 他倆在低聲交談，時不時朝JSP和ASP方向看兩眼， 我估計jQuery又在宣傳他那DOM操作大法了。

幸好，還有一個靠窗的空桌，有兩個座位， 我走過去坐下，要了一杯咖啡，拿起一本雜誌，邊喝邊看。

代碼中混雜HTML

這時候又進來一個年輕人，看到我這一桌還有空位，不客氣地坐下， 掏出一張紙，爬在桌子上刷刷刷地寫代碼。

我偷偷看了一眼，不由得大吃一驚: 怎麼能在代碼中寫HTML呢？

(友情提示：可左右滑動)

這時候服務員正好走過來送咖啡， 也注意到了這段代碼， 大叫道：「我賽，這都什麼年代了，還在代碼里寫HTML ！」

這一下便炸了鍋，ASP, JSP, jQuery, ExtJS等紛紛圍過來看個究竟。

在代碼中寫HTML，我記得這是上個世紀90年代的事情，那時候連ASP,JSP都沒有，只好用C語言寫CGI代碼，HTML就混雜在C代碼中，類似這樣：

(友情提示：可左右滑動)

這種模式給修改界面和業務邏輯帶來了巨大的麻煩，等到ASP, JSP這樣的「模板」語言出現以後，變成了在HTML中寫代碼：

UI設計師先把HTML頁面整體設計好，交給程序員再用在其中填入動態的部分， 這種方式可以讓設計師和程序員更好地合作。

現在又有人想在代碼中寫HTML，簡直是瘋了！

模板 vs 組件

看到這麼多人圍過來， 小夥子漲紅了臉：「我這不是HTML，我這個是JSX，是JavaScript的一個語法擴展，你們仔細看看，其實和ASP的模板也很像的。」

Hello,

「那你為什麼不直接用模板，為什麼要把HTML放到JavaScript當中？這是我們早就拋棄的反模式！」 ASP問道。

「對啊，為什麼不用模板？ 」 周圍的人也隨聲附和。

「因為我覺得模板難於復用！」 小夥子突然大聲說道。

說起複用，這一點我的體會太深了，在開發中，我通常把描述界面結構的HTML，描述展示的CSS， 和操作DOM的JavaScript放在不同的文件當中，在運行時把他們結合起來，但是這種分離只是技術層面分開管理而已，在邏輯上並沒有實現高耦合的組件，也就無法復用。

「我想了一個新的辦法，」 小夥子繼續說道，「組件化，我們可以創建一個個的組件，然後讓這些組件組合起來形成一個完整的Web界面。 就像我剛寫的組件Welcome，可以復用的，可以用在Web頁面的任何地方。」

「組件？ 這小子有點想法。」 ASP說道，「我表哥Visual Basic 就有很多組件，奧，好像大家叫他控制項，在開發一個應用的時候，只需要把控制項拖拽到表單界面上，設置屬性，編寫對事件的處理代碼就可以了，非常簡單快速。」

「你怎麼沒給我說過？」 JSP表示不滿， 他和ASP在90年代打得你死我活，現在拋棄了門戶之見，成了好基友。

小夥子向ASP投去感激的目光，找到支持支持者了。

沒想到ASP馬上潑了一盆冷水：「不過控制項是在桌面應用使用的，在Web開發中我們不這麼干，它和桌面應用差別太大，實現不了。」

小夥子馬上反駁：「怎麼實現不了，一個組件不就是一個可以復用的單元嗎？ 在Web頁面上， 這個組件要像桌面應用那樣，負責自己的展示和行為，有屬性可以設置，有方法可以調用，對外可以響應事件(Event)， 對內可以維護組件狀態。」

我說道：「你說說你那個Welcome組件具體怎麼復用？」

小夥子說： 「很簡單，在JSX中，那個Welcome組件就像普通的HTML標籤一樣，直接就可以使用了！」

確實是不錯，這些自定義的標籤（組件），可以一層層地組合起來，構建成一個大的頁面。

有狀態的組件

還是jQuery經驗老道，他眯著眼看了半天，開始發難：「你號稱是組件，但組件都是有內部狀態的，而你這代碼就是一個函數而已，一個輸入，一個輸出，根本不是組件！」

小夥子說：「你說得沒錯，那個組件是個無狀態的組件，只有輸入和輸出，我給你看個有狀態的組件。」

（友情提示：可左右滑動）

這個組件一下子就複雜多了，似乎是一個繼承了Component的類，有構造器，有函數，還有個返回HTML的render方法。

小夥子說著在瀏覽器中給我們展示了一下效果，果然，每次點擊，Count數都會變化。

我們看了以後都有一個感覺，這確實是一個組件，你看它內部有展示的邏輯，有狀態，有操作，自己的活兒自己干。

「state ? 你不是有props嗎？ 還用state ？ 」 ExtJS 看到jQuery沉默了，馬上為朋友兩肋插刀。

小夥子說道：「是這樣的，我用props 來保存從上層組件（父組件）傳遞過來的數據，用state來保存本組件的內部數據。」

jQuery道：「父組件可以用props給子組件傳遞數據，那子組件如果想把數據告訴父組件，該怎麼處理？」

小夥子向jQuery投去佩服的目光， 回答道：「這個問題我想過了，父組件可以用props傳遞一個"鉤子"函數給子組件，在必要的時候，子組件就調用這個函數，把數據告知父組件。」

UI = render(data)

jQuery不甘心，想了一會兒，又拋出一個重磅炸彈：「怪哉怪哉，從你這個Counter組件中，怎麼看不到對DOM的操作？ 如果沒有DOM操作，你怎麼實現點擊了Click! 按鈕以後，下面的數目發生變化的？ 」

jQuery是操作DOM的高手，什麼鏈式調用了，選擇器了被他玩得賊溜，現在看到Counter組件中連一行DOM操作的代碼都沒有，顛覆了自己的人生觀，肯定要弄個究竟。

「我估計大家都用JavaScript操作過DOM，說實話，很簡單，很直觀，可是當項目變得複雜以後， 當頁面上的事件處理多了以後， JavaScript的代碼會和DOM緊密地糾纏在一起，就不好維護了。」 小夥子說道。

大家都紛紛點頭。

「所以呢， 所以我就想辦法把他屏蔽了，在我這裡，不用操作DOM,只要你調用setState方法，我發現數據發生了變化，我就會渲染整個頁面。所以對程序員來講，在概念上非常簡單，只需要setState，剩下的操作都交給我。 用個公式來表達就是UI = render(data)。 」

「嘶.....」 聽到這個「渲染整個頁面」，大傢伙都倒吸了一口涼氣。如果一個頁面有很多數據，現在只改變了一個小小的count的數值 ，難道還要把其他的也全部渲染一遍？

看到大家疑惑的表情，小夥子笑了笑，解釋道：「全部渲染是從概念上來說的，在實現層面，還是局部更新。為了實現這一點，我特意實現了一個虛擬的DOM。」

「每次數據發生了變化，我會比較兩個虛擬DOM的區別，找到那些數據真正發生改變的地方，然後操作真正的DOM， 這樣以來，其實真正的更新還是局部的。」

看到了虛擬DOM, 大家都明白這小夥子絕對不是一般人了！。

但是看到那混雜著代碼和HTML的，試圖改變Web開發方式的「組件」，都覺得不可思議，難以接受，搖著頭，慢慢地散開了。

ASP一邊走一邊給JSP說：「這玩意兒，太顛覆了，根本不會有人用。」

JSP同意：「是啊，我們還是玩模板去吧。」

人走得差不多了，我問小夥子：「你叫什麼名字？ 」

「ReactJS。」

「有沒有興趣到我們公司工作？ 」 我遞上了我的名片，上面印著我們公司的Logo : Facebook。

（完）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！