初探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 ...
随机推荐
- MongoDB 优化器MongoDB Database Profiler（12）
优化器profile 在MySQL 中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB 中是否有类似的功能呢?答案是肯定的,那就是MongoDB Database Profiler. 1 ...
- AOJ 0558 Cheese【BFS】
在H * W的地图上有N个奶酪工厂,分别生产硬度为1-N的奶酪.有一只吃货老鼠准备从老鼠洞出发吃遍每一个工厂的奶酪.老鼠有一个体力值,初始时为1,每吃一个工厂的奶酪体力值增加1(每个工厂只能吃一次), ...
- Domino----The Address Book does not contain a cross certificate capable of validating the public key.
The Address Book does not contain a cross certificate capable of validating the public key. 地址本不包含交叉 ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- Linux 利用lsof命令恢复删除的文件
lsof命令 lsof命令用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所以需 ...
- jQuery.rotate.js参数
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- webpack -p压缩打包react报语法错误处理
前言:在用webpack打包react代码的时候发现一个问题,做一个处理总结. 我的webpack配置: var webpack = require('webpack'); //打包less插件 va ...
- React,React Native中的es5和es6写法对照
es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...
- unison+inotify-tools触发式双向自动同步
双向实时数据同步部署 首先添加服务器ssh信任,即免秘钥登陆 Web1:192.168.10.36 Web2:192.168.10.37 分别在web1和web2上执行以下命令 mkdir ~/.ss ...
- HDU 5008 Boring String Problem(后缀数组+二分)
题目链接 思路 想到了,但是木写对啊....代码 各种bug,写的乱死了.... 输出最靠前的,比较折腾... #include <cstdio> #include <cstring ...