基於種種種種的原因吧，最終決定在專案的web端採用reactjs來做。
##1、React.js
這是大名鼎鼎的臉書出品。一個web前端的js框架。
說起來之前用的是Angular.js，當時對資料雙向繫結、頁面路由什麼的感到十分神奇和驚豔。
這次本來也打算用這個玩，結果發現並不盡如人意，總體來說就是嫌棄麻煩，而且印象中Angular的網路請求對於springMVC的服務端並不是特別相容。正好大家都說臉書好，就拿來試試。
總體來講呢，這兩個東西都比較適合後端開發人員拿來開發前端。React也是很讓人驚豔的框架。實踐中感覺React對於介面的掌控力要強過Angular，後者貌似將更多的精力放在了業務邏輯上。
也許就像某些教程上所說的一樣，Angular將前端變成了MVC，React則更專注於單純的V層功能。
總而言之，能自動跟著資料變化改變介面，就滿足了我的根本需求。
React的強大之處在於模組化，對於習慣了Class的java程式猿來說簡直不要太容易理解。
2、簡單入門
既然決定了開工，就上程式碼吧，第一個要做的東西是一個比賽列表，要根據時間選擇器來載入不同日期的比賽。
區域性重新整理Ajax什麼的倒是也能做，不過寫介面從來都不是我的強項，還是直接把偉大的UI爸爸寫好的html拿過來改一改的好。
介面的實現效果如圖所示：
圖片來自lol.766.com
首先呢，對於此元件做分析，很容易得出，每一場比賽都可以作為一個單獨的元件，於是一個最簡單的元件就出來了：
var Match = React.createClass({
render: function () {
var url = "match/";
url+=this.props.matchid;
return (
<li>
<a href={url}>
<div className="march-time">
<p className="day">{this.props.day}</p>
<p className="day-time">{this.props.startTime}</p>
</div>
此處省去一堆沒什麼卵用的html
</a>
</li>
);
}
});
複製程式碼而元件的呼叫可以是醬紫的：
<Match day={day} startTime={m.matchdate} matchid={m.id} teamALogo={m.teamA.logo} teamAName={m.teamA.shortname} teamBLogo={m.teamB.logo} teamBName={m.teamB.shortname} result={m.result}/>
複製程式碼通過this.props.xxx就可以拿到在標籤中傳入的引數了。
在其中需要注意的問題有：
- 要把所有的class都改成className
- 要注意行內的css寫作：style={{style:value}}
其實還有很多和標準html不同的地方，畢竟React用的是虛擬DOM，什麼時候用到了再說
3、動起來
如果是隻能靜態展示的頁面，其實完全沒必要用React來做，接下來才是正事。
我們要點選上面的日期，然後讓下面的比賽列表跟著變化。
不管這個應該是怎麼說，這些框架對於我來說最大的好處就在於“資料驅動”。只要改資料，頁面就會跟著變化。
於是下一步就是分析這個元件有哪些資料。
日期要變，所以上邊的日期選擇器就是一組資料，為了便於請求，我定義為Date型別。
在資料初始化的方法中如此寫道：
getInitialState: function() {
return {
matchlist:[],
centerDay: new Date()
};
},
複製程式碼是噠！沒錯！ 我為了偷懶，只記錄了最中間一天（預設今天）的日期，兩邊的是算出來的~
然後是比賽資料，比賽資料是根據日期通過ajax請求獲取的，重點在於更新資料：
componentDidMount: function() {
this.serverRequest = $.get("/match/queryMatchByDate?time="+this.state.centerDay.getTime(),
function (result) {
console.log("已載入比賽資料");
this.setState({matchlist:result});
}.bind(this));
}
複製程式碼這個方法的名字就很明顯啊，元件完成載入之後，會呼叫此方法，我在這裡載入初始的資料
在React的元件中，有props和state兩個用來存放資料的地方，簡單來說，props是從外部傳入的，state就是需要變化的資料。
state說到底是一個js物件，使用的時候可以用this.state.prop_name來獲取，但是賦值的時候不要這麼幹！
只有呼叫this.setState()方法更新的資料，才會驅動頁面發生變化。另外此方法的引數不需要傳遞全部的，哪個改動就傳哪個，不會影響到其他的引數。
然後將這些資料分別裝進上一步寫好的比賽元件中就可以拿去顯示了。
React是可以將標籤push到陣列然後拿去用的哦
下一步是點選事件的工作了。
React的點選事件通過onClick引數進行配置。具體如下：
<a href="#" onClick={this.handleTimeLineClick.bind(this,this.getDateTime(-7))}></a>
複製程式碼handleTimeLinkClick是在此元件中的一個方法。若是不需要傳遞其餘的引數，可以省去後面的.bind，在這裡需要傳遞一個日期，所以用bind，第一個是this，第二個就是要傳遞的引數。
至此基本的工作就完成了
#4、 輸入資料
後面的事情就是我要做一個聊天元件
然後我要拿輸入框的資料
然後我就發現需要學習啊。
React中想要獲取表單的資料還是挺麻煩的，以一個TextArea來說：
<textarea className="form-control" rows="1" onChange={this.messageHolder} value={this.state.content}></textarea>
複製程式碼重點在於兩個：
- 值要用value來指定，而且必須指定為state中的變數。
- 要有onChange方法，否則你會發現此輸入框不能輸入資料/(ㄒoㄒ)/~~
messageHolder的方法是醬紫的：
messageHolder : function(event){
this.setState({
content:event.target.value
})
},
複製程式碼還記得上面說的麼？只有用setState才能改變頁面的顯示效果！
然後愉快的傳送和聊天吧~
send : function(){
if(this.props.ticket==""){
alert("使用者尚未登入，請登陸後操作")
}
if(this.state.content=="")
return;
console.log("message content:"+this.state.content);
this.state.socket.emit("sendMessage",{
ticket:this.props.ticket,
message:this.state.content
});
this.setState({
content:""
});
},
複製程式碼有誰看出來怎麼做得了吧~那是下一篇的故事了~