初探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.NET 开发

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

  2. ReactJS的开发日常

    在用React框架开发的日子里,踩的坑真不少!今天就来说说这个关于组件的周期,说的可能不是很清楚,但是也给自己留下一个踩坑的纪念,如有不妥 还望大家指点一二 Warning: setState(... ...

  3. 1. ReactJS基础(开发环境搭建)

    本文主要介绍通过React官方提供的create-react-app脚手架进行开发环境的搭建. 1.安装node环境(安装过程这里不做介绍,可参考其他博文) 在cmd中输入node -v 如果可以看到 ...

  4. Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

    http://localhost:3000/

  5. ReactJS.NET

    初探ReactJS.NET 开发 ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为 ...

  6. 从0开发3D引擎（七）：学习Reason语言

    目录 上一篇博文 介绍Reason Reason的优势 如何学习Reason? 介绍Reason的部分知识点 大家好,本文介绍Reason语言以及学习Reason的方法. 上一篇博文 从0开发3D引擎 ...

  7. React与ES6（一）开篇介绍

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  8. React Native实践之携程Moles框架

    编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...

  9. web前端学习路线和步骤

    H5+全栈工程师  (学习下列技术可以加QQ: 1416 7596 61)第一阶段:初级入门阶段基本功 1.HTML入门 Windows概述.浏览器概述.HTML简介.HTML标签详解.前端开发工具概 ...

随机推荐

  1. A Novel Multi-label Classification Based on PCA and ML-KNN

     ICIC Express Letters                  ICIC International ⓒ2010 ISSN 1881-803X Volume4, Number5, O ...

  2. [LeetCode136]Single Number寻找一个数组里只出现一次的数

    题目: Given an array of integers, every element appears twice except for one. Find that single one. No ...

  3. Java下拼接执行动态SQL语句（转）

    在实际业务中经常需要拼接动态SQL来完成复杂数据计算,网上各类技术论坛都有讨论,比如下面这些问题: http://bbs.csdn.net/topics/390876591 http://bbs.cs ...

  4. 左右10g DG中间ORA-19527和ORA-00312错误解决演示示例

    这些天大厦10g DG Windows 2008 R2测试环境,主要明天去给客户端,再建一个生产资源库DG,其中一些发现的问题.特此记录下来 因为将要部署到生产环境.所以考虑在线搭建DG的方案,即不停 ...

  5. CFileDialog 使用简单介绍

    CFileDialog使用文件选择对话框:首先构造一个对象,并提供一个相应的参数,构造函数原型例如,下面的: CFileDialog::CFileDialog( BOOL bOpenFileDialo ...

  6. OC动态创建的问题变量数组.有数组,在阵列13要素,第一个数据包阵列,每3元素为一组,分成若干组,这些数据包的统一管理。最后，一个数组.(要动态地创建一个数组).两种方法

    <span style="font-size:24px;">//////第一种方法 //        NSMutableArray *arr = [NSMutable ...

  7. 每天进步一点点——Linux文件锁编程flock

    转载请注明出处:http://blog.csdn.net/cywosp/article/details/30083015 1. 场景概述     在多线程开发中.相互排斥锁能够用于对临界资源的保护,防 ...

  8. java javaEE javaWEB J2EE程序猿猿程序是脑损伤，终身工作程序猿

    这几天我越来越郁闷.程序员现在很火----特javaEE员. 但我觉得火只是给人们的工作程序员. 原因 javaweb该项目是非常大的.没听过那个码农能单独接到什么项目.仅仅能被人剥削. 有人不信,我 ...

  9. IE8/IE9无法启用JavaScript怎么办

    在IE8/IE9 中,有些同学在浏览网页时,收到提示:“需要启用 JavaScript …”,并且会发现网页上某些功能不能用了,比如点击网页里的按钮没反应等等.这个是因为浏览器的JavaScript ...

  10. HDU 1710-Binary Tree Traversals（二进制重建）

    Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...