ReactJS平常也被称呼”React”,是一个刚好在本场游戏中出台的新手。它由Facebook创设,并在2013年首次公布。Facebook认为React在拍卖SPA难题上能够改为Angular的替代品,因而假设您认为Angular和React那两种框架是竞争对手,那你的通晓就对了。可是,与Angular相比较,React最大的不一致之处在于,它是一个更高效、具有更高品质、速度更快的类库。下图显示了运用React、Angular、Knockout(另一连串库,在本文中不做探究),以及纯粹的JavaScript在DOM中渲染包含1000个内容的列表,各自所需的年月:

XML 1

来源: The Dapper Developer

一经你的使用极度尊敬质量,那么React就是无可非议的取舍。也为此,在二零一九年的2015
AngularJS研究会也有提及,两者可以并行结合,让整个网页品质更提高一步。XML 2

有兴趣者能够参考下边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组件:

XML 3

始建第二个零件 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’)

);

运转效果如下:

XML 4

这一段重点是将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探索(一):背景、规划和高危机

相关文章

网站地图xml地图