初探ReactJS.NET 开发

编程之家收集整理的这篇文章主要介绍了初探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</>

bodydiv id="content"></scriptsrc="@Url.Content("~/Scripts/react.js")"></"~/Scripts/Tutorial.jsx">

添加以下代码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出来的界面当作组件来操作,上面就是一个组件的生成语法,其中组件就是commentBoxRenderContent之后,而建议作法是要将生成的对象的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!" },1); font-family: Consolas; font-size: 9pt"> { Author: "Pete Hunt BBB",Text: "This is one comment" },1); font-family: Consolas; font-size: 9pt"> { Author: "Jordan Walke CCC",Text: "This is *another* comment" }

];

var CommentList = React.createClass({

var commentNodes = this.props.data.map(function (fff) {

<Comment author={fff.Author}>

{fff.Text}

</Comment>

});

<div className="commentList">

{commentNodes}

});

 

var Comment = React.createClass({

render: function() {

 

<div className="comment">

<h2 className="commentAuthor">

{this.props.author}

</h2>

{this.props.children}

React.render(

<CommentBox data={data}/>,1); font-family: Consolas; font-size: 9pt"> 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>之后加入下面这一行

=">

若是要改用服务端拉取数据,就必须考虑到React State,网页初始化时候并没有数据,但是会先把网页Render出来这时候再调用MVC的Controller取出数据,此时数据就会有所变更,进而去更新数据。

public ActionResult Reactjs()

{

IList<CommentModel> _comments = newList>

CommentModel

Author = "Daniel Lo Nigro",

Text = "Hello ReactJS.NET World!"

},1)">"Pete Hunt""This is one comment"

"Jordan Walke""This is *another* comment"

};

 

return Json(_comments,JsonRequestBehavior.AllowGet);

 

}

 

JSX可以套用上面的Script去做部分修改获取数据地方改成GET Data,完整的代码如下:

/** @jsx React.DOM */

 

    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();

<h1>Comments</h1>

<CommentList data={this.state.data} />

<br />

 

});

 

 

 

 

var CommentList = React.createClass({

var commentNodes = this.props.data.map(function (fff) {

<Comment author={fff.Author}>

{fff.Text}

</Comment>

});

<div className="commentList">

{commentNodes}

});

 

var Comment = React.createClass({

render: function() {

 

<div className="comment">

<h2 className="commentAuthor">

{this.props.author}

</h2>

{this.props.children}

<CommentBox url="/Home/Reactjs" />,1)">);

 

上面是简要演示了使用ReactJS.NET,进一步的请参考官方网站 http://reactjs.net/ 的文档,后续继续学习ReactJS。

示例代码下载: http://files.cnblogs.com/files/shanyou/ReactDemo.zip

React 中文网

React 入门教程

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

深入浅出React(一):React的设计哲学 - 简单之美

React Native探索(一):背景、规划和风险

总结

以上是编程之家为你收集整理的初探ReactJS.NET 开发全部内容,希望文章能够帮你解决初探ReactJS.NET 开发所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的HTML5相关文章

概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素
在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使用服务器端控件来生成统计图的方法更加具有
ReactJS通常也被称为&quot;React&quot;,是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处理SPA问题上可以成
又到了一年一度的中国春运,今年的网络订票(12306.cn)有好多的故事上演,下面几条是这两天的几条相关新闻。猎豹浏览器推出春运抢票版 九大优势轻松订票抢票插件风靡的恶果:农民工成购车票弱势群体123
Twitter发布了Flight项目。Flight是一个轻量级的、基于组件的JavaScript框架,可以将行为映射到DOM节点上。Twitter将其用在自己的Web应用上,Twitter基于MIT许
JayData 是一个标准的、跨平台的库和方法,用于访问和操作各种不同的数据源,最适合用于 JavaScript 和 HTML5 应用。 官方网站:http://jaydata.org/ ASP.NE
简洁优雅的 Twitter Bootstrap Metro 界面风格开发框架,是 GitHub 上的开源项目http://talkslab.github.com/metro-bootstrap 。Me
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS、
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注