初探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 入门教程

颠覆式前端UI开发框架：React

深入浅出React（一）：React的设计哲学 - 简单之美

React Native探索（一）：背景、规划和风险

欢迎大家关注微信号opendotnet，微信公众号名称：dotNET跨平台。扫下面的二维码或者收藏下面的二维码关注吧（长按下面的二维码图片、并选择识别图中的二维码）

 

ReactJS.NET的更多相关文章

  1. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  2. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  3. reactjs 接入数据模型以及markdown语法的支持

    页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:  

  4. 初探ReactJS.NET 开发

    ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...

  5. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  6. redux的中间层 --reactjs学习

    React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux 负责Model 一开始学习Redux的中间层 有点 摸不到头, 其实只要你注意 ...

  7. 初识ReactJs（一）

    React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...

  8. D2.Reactjs 操作事件、状态改变、路由

    下面内容代码使用ES6语法 一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...

  9. D1.1.利用npm（webpack）构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

  10. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

随机推荐

  1. NET5实践：项目创建-结构概述-程序运行-发布部署

    ASP.NET5实践01:项目创建-结构概述-程序运行-发布部署   1.项目创建 ASP.NET5项目模板有三种: 新建项目: 选择模板: 2.结构概述 References对应配置是project ...

  2. JVM学习（1）——通过实例总结Java虚拟机的运行机制（转）

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: JVM的历史 JVM的运行流程简介 JVM的组成(基于 Java 7) JVM调优参数:-Xmx和-Xms ...

  3. Matlab学习------------带有右键菜单的GUI学习实例

    实例步骤: 须要设置UIContextMenu,否则点击右键不显示. 右键点击第一个菜单之后:(在菜单中加入对应的回调函数) function r1_Callback(hObject, eventda ...

  4. hdu 4856 Tunnels(bfs+状态压缩)

    题目链接:hdu 4856 Tunnels 题目大意:给定一张图,图上有M个管道,管道给定入口和出口,单向,如今有人想要体验下这M个管道,问最短须要移动的距离,起点未定. 解题思路:首先用bfs处理出 ...

  5. NET MVC过滤器

    NET MVC过滤器 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在ASP.NET MVC中有四种过滤器类型

  6. LAN远程重启server安全方法

    原创文章.转载请注明出处.(百度经验:http://jingyan.baidu.com/article/454316abaadc41f7a7c03a13.html) 在局域网中,管理和操作server ...

  7. Linux下find命令具体解释

    1. find命令 linux的find命令用来查找文件,功能非常强大, 能够通过时间, 用户组, 文件名称, 文件类型, 权限,大小等来查找对应文件. 2. find的使用方法 通过find --h ...

  8. 示例：Netty 处理 TCP数据分包协议

    一个.Netty解决TCP协议的数据分包的想法 我们知道通过TCP协议发送接收数据时,假设数据过大.接收到的数据会是分包的.比方:                                   ...

  9. tc-SRM-626-DIV1-250

    枚举alice投掷骰子得到的结果的每一种情况极其数量. 枚举bob投掷骰子得到的结果的每一种情况极其数量. 然后枚举alice投掷骰子得到的结果的数量和bob投掷骰子比alice低的数量. 然后计算结 ...

  10. win9x_win2k下对物理磁盘的操作

    void CReadSectorDlg::OnReadButton() { UpdateData (TRUE) ; CFile m_Sector_file ; char * buffer ; if ( ...