ReactJS通常也被稱為"React"，是一個(gè)剛剛在這場(chǎng)游戲中登場(chǎng)的新手。它由Facebook創(chuàng)建，并在2013年首次發(fā)布。Facebook認(rèn)為React在處理SPA問題上可以成為Angular的替代品，因此如果你認(rèn)為Angular和React這兩種框架是競(jìng)爭(zhēng)對(duì)手，那你的理解就對(duì)了。不過，與Angular相比，React最大的不同之處在于，它是一個(gè)更高效、具有更高性能、速度更快的類庫(kù)。下圖展示了使用React、Angular、Knockout（另一種類庫(kù)，在本文中不做討論），以及純粹的javaScript在DOM中渲染包含1000個(gè)內(nèi)容的列表，各自所需的時(shí)間：
來源: The Dapper Developer
如果你的應(yīng)用非常看重性能，那么React就是正確的選擇。也因此，在今年的2015 AngularJS研討會(huì)也有提及，兩者可以互相結(jié)合，讓整個(gè)網(wǎng)頁性能更提升一步。
有興趣者可以參考下面Demo Code：https://github.com/djsmith42/angular_react_directive_example
關(guān)于ReactJS .NET
它是專對(duì).NET平臺(tái)開發(fā)者設(shè)計(jì)，讓我們不只可以在前端去Render出頁面，也可以在Server端去Render頁面。開發(fā)ReactJS可以用一般JS 庫(kù)，也可以通過類似xml的JSX編寫方式去開發(fā)。官方網(wǎng)站 http://reactjs.net/ ，已經(jīng)可以支持asp.net 5 !
我們參照入門教程（http://reactjs.cn/react/docs/getting-started.html），首先我們創(chuàng)建一個(gè)空的ASP.NET MVC 4項(xiàng)目，可以通過Nuget去安裝ReactJS.NET組件：
創(chuàng)建第一個(gè)組件 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')
);
把每個(gè)想要Render出來的界面當(dāng)作組件來操作，上面就是一個(gè)組件的生成語法，其中組件就是commentBox。被Render在Content之后，而建議作法是要將生成的對(duì)象的JSX文件，放在要呈現(xiàn)的Tag后面。
若是要綁定數(shù)據(jù)也可以這樣寫：
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')
);
運(yùn)行效果如下：
這一段主要是將data這個(gè)數(shù)據(jù)集放入Commentbox這個(gè)對(duì)象中，在Ccommentbox對(duì)象中又包含了Commentlist這個(gè)對(duì)象，所以，必須產(chǎn)生Commenlist這個(gè)對(duì)象，并在這對(duì)象里面處理數(shù)據(jù)，而在Commentlist中，每條數(shù)據(jù)的呈現(xiàn)定義，定義為：
var commentNodes = this.props.data.map(function (fff) {
return (
<Comment author={fff.Author}>
{fff.Text}
</Comment>
);
最后，在由Comment產(chǎn)生對(duì)象，并在對(duì)象內(nèi)定義每一條數(shù)據(jù)的樣式。就可以把每筆數(shù)據(jù)用List方式呈現(xiàn)出來了。而在使用JSX最重要一點(diǎn)，千萬要記得在文件最開頭要加入
/** @jsx React.DOM */
雖然，它是采用JSX方式編寫，但是最后還是會(huì)編譯成JS文件，若是沒有加入這一行，就不會(huì)有動(dòng)作了，且必須在MVC的View中的<head>之后加入下面這一行
<script src="@Url.Content("~/Scripts/react.js")"></script>
若是要改用服務(wù)端拉取數(shù)據(jù)，就必須考慮到React State，網(wǎng)頁初始化時(shí)候并沒有數(shù)據(jù)，但是會(huì)先把網(wǎng)頁Render出來這時(shí)候再調(diào)用MVC的Controller取出數(shù)據(jù)，此時(shí)數(shù)據(jù)就會(huì)有所變更，進(jìn)而去更新數(shù)據(jù)。
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去做部分修改，獲取數(shù)據(jù)地方改成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')
);
上面是簡(jiǎn)要演示了使用ReactJS.NET, 進(jìn)一步的請(qǐng)參考官方網(wǎng)站 http://reactjs.net/ 的文檔，后續(xù)繼續(xù)學(xué)習(xí)ReactJS。
示例代碼下載： http://files.VEVb.com/files/shanyou/ReactDemo.zip
React 中文網(wǎng)
React 入門教程
顛覆式前端UI開發(fā)框架：React
深入淺出React（一）：React的設(shè)計(jì)哲學(xué) - 簡(jiǎn)單之美
React Native探索（一）：背景、規(guī)劃和風(fēng)險(xiǎn)
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
