ReactJS ：我就是想把代碼和HTML混在一起！
當我走進這個著名的咖啡館，這里已經有很多人了，我環顧四周，看到遠處的JSP同學和ASP同學正聊得火熱，他倆，還有今天沒看見的Velocity同學每次都會占據最里邊的座位，似乎故意要逃避大家。
從他們的表情看，我就能猜出來這兩個家伙又在抱怨人心不古，世風日下，沒有程序員使用他們了。
旁邊是jQuery和ExtJS， 他倆在低聲交談，時不時朝JSP和ASP方向看兩眼， 我估計jQuery又在宣傳他那DOM操作大法了。
幸好，還有一個靠窗的空桌，有兩個座位， 我走過去坐下，要了一杯咖啡，拿起一本雜志，邊喝邊看。
代碼中混雜HTML
這時候又進來一個年輕人，看到我這一桌還有空位，不客氣地坐下， 掏出一張紙，爬在桌子上刷刷刷地寫代碼。
我偷偷看了一眼，不由得大吃一驚: 怎么能在代碼中寫HTML呢？
- function Welcome(props) {
- return <h1>Hello, {props.name}</h1>;
- }
這時候服務員正好走過來送咖啡， 也注意到了這段代碼， 大叫道：“我賽，這都什么年代了，還在代碼里寫HTML ！”
這一下便炸了鍋，ASP, JSP, jQuery, ExtJS等紛紛圍過來看個究竟。
在代碼中寫HTML，我記得這是上個世紀90年代的事情，那時候連ASP,JSP都沒有，只好用C語言寫CGI代碼，HTML就混雜在C代碼中，類似這樣：
- void main(){
- char content[MAXLINE];
- sprintf(content,"<html>");
- sprintf(content,"<head>");
- sprintf(content,"<title>Homepage</title>");
- sprintf(content,"</head>");
- ......其他內容略......
- printf("Content-length : %d \r\n",(int)strlen(content));
- printf("Content-type:text/html \r\n\r\n");
- printf("%s",content);
- fflush(stdout);
- exit(0);
- }
這種模式給修改界面和業務邏輯帶來了巨大的麻煩，等到ASP, JSP這樣的“模板”語言出現以后，變成了在HTML中寫代碼：
UI設計師先把HTML頁面整體設計好，交給程序員再用<%..%>在其中填入動態的部分， 這種方式可以讓設計師和程序員更好地合作。
- <%@ Language="VBScript" %>
- <html>
- <head><title>我的主頁</title></head>
- <body>
- <% For i=3 to 5 %>
- <font size=<%=i%> >
- 你好，歡迎來到我的主頁。
- </font> <br />
- <% Next %>
- </body>
- </html>
- }
現在又有人想在代碼中寫HTML，簡直是瘋了！
模板 vs 組件
看到這么多人圍過來， 小伙子漲紅了臉：“我這不是HTML，我這個是JSX，是JavaScript的一個語法擴展，你們仔細看看，其實和ASP的模板也很像的。”
<h1>Hello, {props.name}</h1>
“那你為什么不直接用模板，為什么要把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標簽一樣，直接就可以使用了！”
- function App(props){
- return(
- <div>
- <Welcome name="碼農翻身" />
- <Welcome name="張大胖" />
- </div>
- );
- }
確實是不錯，這些自定義的標簽（組件），可以一層層地組合起來，構建成一個大的頁面。
有狀態的組件
還是jQuery經驗老道，他瞇著眼看了半天，開始發難：“你號稱是組件，但組件都是有內部狀態的，而你這代碼就是一個函數而已，一個輸入，一個輸出，根本不是組件！”
小伙子說：“你說得沒錯，那個組件是個無狀態的組件，只有輸入和輸出，我給你看個有狀態的組件。”
- class Counter extends React.Component{
- constructor(props){
- super(props);
- this.state = {count : 0};
- }
- handleClick(){
- this.setState({count: this.state.count + 1});
- }
- render(){
- return (
- <div>
- <button onClick={(e) => this.handleClick(e)}>Click!</button>
- <h3>
- Click Count : {this.state.count}
- </h3>
- </div>
- );
- }
- }
這個組件一下子就復雜多了，似乎是一個繼承了Component的類，有構造器，有函數，還有個返回HTML的render方法。
小伙子說：“看到沒有，這是一個用來計數的小組件， 數值被保存起來了，就是那個 this.state.count ，初始值為0， 每次點擊就會調用this.setState函數，把count 加一。”
小伙子說著在瀏覽器中給我們展示了一下效果，果然，每次點擊，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。
【本文為51CTO專欄作者“劉欣”的原創稿件，轉載請通過作者微信公眾號coderising獲取授權】
