初探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. Java知多少（87）选择框和单选按钮（转）

    选择框.单选框和单选按钮都是选择组件,选择组件有两种状态,一种是选中(on),另一种是未选中(off),它们提供一种简单的 “on/off”选择功能,让用户在一组选择项目中作选择. 选择框 选择框(J ...

  2. 动软.NET 分页存储过程UP_GetRecordByPage

    1, ------------------------------------ --用途:支持任意排序的分页存储过程 --说明: ----------------------------------- ...

  3. RH033读书笔记(15)-Lab 16 The Linux Filesystem

    Lab 16 The Linux Filesystem Goal: Develop a better understanding of Linux filesystem essentials incl ...

  4. 【POJ】The Suspects（裸并查集）

    并查集的模板题,为了避免麻烦,合并的时候根节点大的合并到小的结点. #include<cstdio> #include<algorithm> using namespace s ...

  5. JProgressBar的一个框架

    Frame: package swing.progress; import java.awt.BorderLayout; import java.awt.Frame; import java.awt. ...

  6. CodeCounter代码统计

    今天一天写的,困死了 开发环境:VS2012 + WIN8-x64, MFC CSDN下载链接:http://download.csdn.net/detail/npu_wy/7405577 百度云下载 ...

  7. Html 5 坦克大战（韩顺平县版本号）

    html 5例如,下面的代码段: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/ ...

  8. React.js入门笔记 创建hello world 的6种方式

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...

  9. 了解大数据的技术生态系统 Hadoop,hive,spark(转载)

    首先给出原文链接: 原文链接 大数据本身是一个很宽泛的概念,Hadoop生态圈(或者泛生态圈)基本上都是为了处理超过单机尺度的数据处理而诞生的.你能够把它比作一个厨房所以须要的各种工具. 锅碗瓢盆,各 ...

  10. Laravel nginx 伪静态规则

    最近的各种调查PHP相框(CI, Cake, ThinkPHP, Laravel, Yii)情绪Laravel它看起来很漂亮,下一个深入了解.用发展机Apache,Stage在运行nginx,一旦部署 ...