ReactJS通常也被稱為"React"，是一個剛剛在這場游戲中登場的新手。它由Facebook創建，并在2013年首次發布。Facebook認為React在處理SPA問題上可以成為Angular的替代品，因此如果你認為Angular和React這兩種框架是競爭對手，那你的理解就對了。不過，與Angular相比，React最大的不同之處在于，它是一個更高效、具有更高性能、速度更快的類庫。下圖展示了使用React、Angular、Knockout（另一種類庫，在本文中不做討論），以及純粹的JavaScript在DOM中渲染包含1000個內容的列表，各自所需的時間：
來源: The Dapper Developer
如果你的應用非常看重性能，那么React就是正確的選擇。也因此，在今年的2015 AngularJS研討會也有提及，兩者可以互相結合，讓整個網頁性能更提升一步。
有興趣者可以參考下面Demo Code：https://github.com/djsmith42/angular_react_directive_example
關于ReactJS .NET
它是專對.NET平臺開發者設計，讓我們不只可以在前端去Render出頁面，也可以在Server端去Render頁面。開發ReactJS可以用一般JS 庫，也可以通過類似XML的JSX編寫方式去開發。官方網站 http://reactjs.net/ ，已經可以支持ASP.NET 5 !
我們參照入門教程（http://reactjs.cn/react/docs/getting-started.html），首先我們創建一個空的ASP.NET MVC 4項目，可以通過Nuget去安裝ReactJS.NET組件：
創建第一個組件 CommentBox：
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="@Url.Content("~/Scripts/react.js")"></script>
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>
添加以下代碼到Tutorial.jsx：
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
把每個想要Render出來的界面當作組件來操作，上面就是一個組件的生成語法，其中組件就是commentBox。被Render在Content之后，而建議作法是要將生成的對象的JSX文件，放在要呈現的Tag后面。
若是要綁定數據也可以這樣寫：
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<br />
</div>
);
}
});
var data = [
{ Author: "Daniel Lo AAA", Text: "Hello ReactJS.NET World!" },
{ Author: "Pete Hunt BBB", Text: "This is one comment" },
{ Author: "Jordan Walke CCC", Text: "This is *another* comment" }
];
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (fff) {
return (
<Comment author={fff.Author}>
{fff.Text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
React.render(
<CommentBox data={data}/>,
document.getElementById('content')
);
運行效果如下：
這一段主要是將data這個數據集放入Commentbox這個對象中，在Ccommentbox對象中又包含了Commentlist這個對象，所以，必須產生Commenlist這個對象，并在這對象里面處理數據，而在Commentlist中，每條數據的呈現定義，定義為：
var commentNodes = this.props.data.map(function (fff) {
return (
<Comment author={fff.Author}>
{fff.Text}
</Comment>
);
最后，在由Comment產生對象，并在對象內定義每一條數據的樣式。就可以把每筆數據用List方式呈現出來了。而在使用JSX最重要一點，千萬要記得在文件最開頭要加入
/** @jsx React.DOM */
雖然，它是采用JSX方式編寫，但是最后還是會編譯成JS文件，若是沒有加入這一行，就不會有動作了，且必須在MVC的View中的<head>之后加入下面這一行
<script src="@Url.Content("~/Scripts/react.js")"></script>
若是要改用服務端拉取數據，就必須考慮到React State，網頁初始化時候并沒有數據，但是會先把網頁Render出來這時候再調用MVC的Controller取出數據，此時數據就會有所變更，進而去更新數據。
public ActionResult Reactjs()
{
IList<CommentModel> _comments = new List<CommentModel>
{
new CommentModel
{
Author = "Daniel Lo Nigro",
Text = "Hello ReactJS.NET World!"
},
new CommentModel
{
Author = "Pete Hunt",
Text = "This is one comment"
},
new CommentModel
{
Author = "Jordan Walke",
Text = "This is *another* comment"
},
};
return Json(_comments, JsonRequestBehavior.AllowGet);
}
JSX可以套用上面的Script去做部分修改，獲取數據地方改成GET Data，完整的代碼如下：
/** @jsx React.DOM */
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var data = JSON.parse(xhr.responseText);
this.setState({ data: data });
}.bind(this);
xhr.send();
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<br />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (fff) {
return (
<Comment author={fff.Author}>
{fff.Text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
React.render(
<CommentBox url="/Home/Reactjs" />,
document.getElementById('content')
);
上面是簡要演示了使用ReactJS.NET, 進一步的請參考官方網站 http://reactjs.net/ 的文檔，后續繼續學習ReactJS。
示例代碼下載： http://files.cnblogs.com/files/shanyou/ReactDemo.zip
文章列表
留言列表
