初探ReactJS.NET 开发
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
深入浅出React（一）：React的设计哲学 - 简单之美
初探ReactJS.NET 开发的更多相关文章
- ReactJS.NET 开发
初探ReactJS.NET 开发 ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook ...
- Python之路【第二十三篇】：Django 初探--Django的开发服务器及创建数据库（笔记）
Django 初探--Django的开发服务器及创建数据库(笔记) 1.Django的开发服务器 Django框架中包含一些轻量级的web应用服务器,开发web项目时不需再对其配置服务器,Django ...
- 【初探移动前端开发05】jQuery Mobile (整合版)
前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
- 【初探移动前端开发04】jQuery Mobile (中)
前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
- 【初探移动前端开发03】jQuery Mobile（上）
前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
- Django 初探--Django的开发服务器及创建数据库（笔记）
1.Django的开发服务器 Django框架中包含一些轻量级的web应用服务器,开发web项目时不需再对其配置服务器,Django提供的内置服务器可以在代码修改时自动加载,从而实现网站的迅速开发. ...
- theos初探:ios越狱开发教程
开发环境搭建回顾 现在已经在windows上安装好了theos了.在上一篇中都已经讲了,开发环境主要部件就是: 1.theos,主要包含了使用make时的makefile模板文件.包含了各种库和框架的 ...
- ReactJS的开发日常
在用React框架开发的日子里,踩的坑真不少!今天就来说说这个关于组件的周期,说的可能不是很清楚,但是也给自己留下一个踩坑的纪念,如有不妥 还望大家指点一二 Warning: setState(... ...
- DUBBO初探-搭建DUBBO开发环境
我所理解的DUBBO 相对于传统web开发框架,dubbo更加适合于并行系统开发,分布式,模块化.将server和client都注册到zookeeper注册中心上,然后由最外层客户端发起请求到相应cl ...
随机推荐
- tp框架之AJAX
实现一个AJAX添加并显示数据的例子 控制器 <?php namespace Home\Controller; use Think\Controller; class AjaxControlle ...
- PHP RSA参数签名
为了防止在支付通信过程中的参数数据被篡改或者伪造,采用RSA进行数据签名和验证签名. RSA算法是一种非对称密码算法,所谓非对称,就是指该算法需要一对密钥,使用其中一个加密,则需要用另一个才能解密. ...
- 一个 Q-learning 算法的简明教程
本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为中文翻译,第二部分为英文原文.翻译时为方便 ...
- Express URL跳转（重定向）的实现
Express URL跳转(重定向)的实现 Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和 ...
- 一些linux命令
1. more 慢慢查看文件2. mkdir -p 递归的创建目录3. tree 4. ls -lh 人性化显示
- 搭建高可用mongodb集群（四）—— 分片（经典）
转自:http://www.lanceyan.com/tech/arch/mongodb_shard1.html 按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还 ...
- windows下指定格式文件转移
#放在目录下执行 1.bat 作用:将该目录下所有mp4格式的文件转移至该目录下的target目录下 须保证target目录不存在@echo off md target\ for /f "d ...
- h5 notes
HTML5 服务器发送事件(Server-Sent Events)
- 【BO】SAP BO相关问题汇总贴
本文将以往写过的关于SAP BO相关问题的帖子汇总了一下,方便寻找 #1 为WEBI报表添加自定义字体font #2 WEBI文件打开时提示Illegal access错误 #3 安装BO服务器时,o ...
- BZOJ4583 : 购物
首先,如果一家店的区间完全包含了另一家,那么可以删掉另一家,中间的可以用组合数计算方案数. 那么现在将所有店按$l$排序,那么$l$和$r$都严格递增. 设$f[i][j][k]$表示当前是第$i$天 ...