Facebook看React在拍卖SPA问题达成得以成为Angular的替代品。希望大家随后读到ES5的代码。

ReactJS通常为受喻为”React”,是一个正在马上会玩中上的初手。它由Facebook创建,并当2013年首不好发表。Facebook看React在处理SPA问题及得以成为Angular的替代品,因此若您以为Angular和React这有限栽框架是竞争对手,那尔的敞亮就是本着了。不过,与Angular相比,React最要命的不同之处在于,它是一个重复快捷、具有双重胜似性能、速度更快之类库。下图展示了以React、Angular、Knockout(另一样栽类库,在本文中无举行讨论),以及纯粹的JavaScript在DOM中渲染包含1000个内容之列表,各自所需要的工夫:

//es6与es5的区别
有的是React/React
Native的新家都被ES6的题材迷惑:各路大神都建议我们一直上ES6的语法(class
Foo extends React.Component),
只是网上搜到的累累学科以及例子都是ES5本子的,所以广大口于上的下连照猫画虎都未知晓怎么开。
今天于此整治了有ES5和ES6的写法对照表,希望大家随后读到ES5的代码,也能经过比,在ES6产实现同的效益。

皇冠现金app 1

1、在ES5里,如果使用CommonJS标准,引入React包为主通过require进行,代码类似这样:
var React = require(‘react’);
var {Component,PropTypes} = React;

来源: The Dapper Developer

//引用具体的React Native 组件
var ReactNative = require(‘react-native’);
var {Image , Text } = ReactNative;

如果你的以非常讲究性能,那么React就是正确的挑选。也用,在当年底2015
AngularJS研讨会也发出提及,两者可以并行结合,让漫天网页性能再提升一步。皇冠现金app 2

//ES6 import写法又为专业
import React ,{Component,PropTypes,} from ‘react’;
import {Image ,Text } from ‘react-native’;

起兴趣者可以参照下面Demo
Code:https://github.com/djsmith42/angular_react_directive_example

导出单个类
每当ES5受,要导出一个近乎为别的模块用,一般通过module.exports类导出
例:
//ES5
var MyComponent = React.createClass({

}) ;
module.ecports = MyComponent;

 

//ES6
erport default class MyComponent extends Component{

}
援的上吧接近
//ES5
var MyComponent = require(‘./MyCompinent’);

关于ReactJS .NET

//ES6
import MyComponent from ‘./MyComponent’;

她是把对.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组件:

每当ES5里,通常通过React.createClass来定义一个组件类,像这么:
var Photo = React.createClass({
render : function(){
return(
<Image souce = {this.prop.source} />
);
},
});

皇冠现金app 3

当ES6里,我们由此定义一个蝉联自React.Component的class来定义一个组件类,像这样:
class Photo extends React.Component {
render(){
return (
<Image source = {this.porps.source} />
);
}
}

始建第一个零部件 CommentBox:

为组件定义方法

@{

于点的例证里可视,给组件定义方法不再用 名字:
function()的写法,而是径直用名字(),在方式的最终吧无能够起逗号了。

Layout = null;

//ES5
var Photo = React.createClass({
componentWillMount: function(){
..
},
render: function(){
return(
<Image source = {this.props.source} />
);
},
});

}

//ES6
class Photo extends React.Component {
ComponentWillMount(){
..
}
render(){
return (
<Image source={this.props.souce} />
);
}
}

<html>

概念组件的习性类型以及默认属性

<head>

当ES5里,属性类型及默认属性分别通过propTypes成员以及getDefaultProps方法来促成
//ES5
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
render: function(){
return(
<View />
);
},
});

<title>Hello React</title>

在ES6里,可以合采用static成员来兑现
//ES6
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
};
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}; // 注意这里有分号
render() {
return (
<View />
);
} // 注意这里既没分号也无逗号
}

</head>

呢有人如此形容,虽然不推荐,但读到代码的上你该会领悟它们的意思:

<body>

//ES6
class Video extends React.Component {
render() {
return (
<View />
);
}
}
Video.defaultProps = {
autoPlay: false,
maxLoops: 10,
};
Video.propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
};
顾:
对React开发者而言,static成员以IE10跟之前版本不能够为延续,而于IE11暨外浏览器上足,这起下会带动一些题材。React
Native开发者可以不用操心这个题目。

<div id=”content”></div>

初始化STATE

<script src=”@Url.Content(“~/Scripts/react.js”)”></script>

ES5生情况好像,
//ES5
var Video = React.createClass({
getInitialState: function(){
return {
loopsRemaining: this.props.maxLoops,
};
},
})

<script src=”@Url.Content(“~/Scripts/Tutorial.jsx”)”></script>

//ES6,有三三两两种植写法:
class Video extends React.Component{
state = {
loopsRemaining: this.props.maxLoops,
}
}
但我们推荐还易于亮的于构造函数中初始化(这样您还足以依据需要开片盘算):
//ES6
class Video extends React.Component {
constructor(props){
super(props);
this.atate = {
loopsRemaining: this.props.maxLoops,
}
};
}
拿措施作为回调提供
//ES5
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
// Here, ‘this’ refers to the component instance.
this.setState({showOptionsModal: true});
},
render: function(){
return (
<TouchableHighlight onPress={this.handleOptionsButtonClick}>
<Text>{this.props.label}</Text>
</TouchableHighlight>
)
},
});

</body>

每当ES5下,React.createClass会将具备的计都bind一所有,
如此这般可以交给至自由的地方作为回调函数,而this不会见转变。
但法定现在渐渐认为当下倒而是不正经、不易理解的。
以ES6生,你待经过bind来绑定this引用,或者以箭头函数(它会绑定当前scope的this引用)来调用

</html>

//ES6
class PostInfo extends React.Component
{
handleOptionsButtonClick(e){
this.setState({showOptionsModal: true});
}
render(){
return (
<TouchableHighlight
onPress={this.handleOptionsButtonClick.bind(this)}
onPress={e=>this.handleOptionsButtonClick(e)}
>
<Text>{this.props.label}</Text>
</TouchableHighlight>
)
},
}
箭头函数实际上是当此地定义了一个即之函数,
箭头函数的箭头=>之前是一个空括号、单个的参数誉为、或用括号括起底几近个参数名叫,
万一箭头之后好是一个表达式(作为函数的返回值),或者是为此花括号括起的函数体(需要活动通过return来回到值,否则回的凡undefined)。

上加以下代码到Tutorial.jsx:

// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert(“foo”);
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
待专注的是,不论是bind还是箭头函数,每次被执行都归的是一个新的函数引用,因此只要您还亟需函数的援去举行有别的事情(譬如卸载监听器),那么您要团结保留之引用

var
CommentBox = React.createClass({

// 错误的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener(‘change’, this.onAppPaused.bind(this));
}
componentDidUnmount(){
AppStateIOS.removeEventListener(‘change’,
this.onAppPaused.bind(this));
}
onAppPaused(event){
}
}
// 正确的做法
class PauseMenu extends React.Component{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener(‘change’, this._onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener(‘change’, this._onAppPaused);
}
onAppPaused(event){
}
}
自打夫帖子中我们尚读及均等种植新的做法:

render: function() {

// 正确的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener(‘change’, this.onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener(‘change’, this.onAppPaused);
}
onAppPaused = (event) => {
//把措施直接当一个arrow
function的属性来定义,初始化的时候就绑定好了this指针
}
}

return (

Mixins
当ES5生,我们常常应用mixin来呢我们的接近添加有初的方法,譬如PureRenderMixin
//ES5
var PureRenderMixin = require(‘react-addons-pure-render-mixin’);
React.createClass({
mixins: [PureRenderMixin],

<div className=”commentBox”>

render: function() {
return <div className={this.props.className}>foo</div>;
}
});
而是现在官方已不复打算于ES6里延续实施Mixin,他们说:Mixins Are Dead.
Long Live Composition。

Hello, world! I am a CommentBox.

尽管要如延续应用mixin,还是生一部分老三方的方案可以为此,譬如这个方案

</div>

而官方推荐,对于库编写者而言,应当尽快放弃Mixin的编撰方式,上文中干Sebastian
Markbåge的同段子代码推荐了一样种新的编码方式:

);

//Enhance.js
import { Component } from “React”;

}

export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: ‘Hello’ });
}
render() {
return <ComposedComponent {…this.props} data={this.state.data}
/>;
}
};
//HigherOrderComponent.js
import { Enhance } from “./Enhance”;

});

class MyComponent {
render() {
if (!this.data) return <div>Waiting…</div>;
return <div>{this.data}</div>;
}
}

React.render(

export default Enhance(MyComponent); // Enhanced component
故一个“增强函数”,来有类增加一些计,并且返回一个新类,这确会兑现mixin所实现之大部需。
ES6+带来的另外好处

<CommentBox />,

解构&属性延展

document.getElementById(‘content’)

结缘使用ES6+的解构和属性延展,我们于男女传递一批属性更为有利于了。这个事例把className以外的拥有属性传递让div标签:

);

class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
…others, // contains all properties of this.props except for
className
} = this.props;
return (
<div className={className}>
<PostsGrid {…others} />
<button onClick={this.handleLoadMoreClick}>Load
more</button>
</div>
);
}
}
下面这种写法,则是传递所有属性的还要,用罩新的className值:

拿每个思如果Render出来的界面当作组码来操作,上面就是是一个零件的变动语法,其中组件就是commentBox。被Render在Content之后,而建议作法是如将变的靶子的JSX文件,放在要表现的Tag后面。

<div {…this.props} className=”override”>

</div>
这个事例则相反,如果属性被没有含className,则提供默认的值,而要属性被早就包含了,则运用性质被的价

 

<div className=”base” {…this.props}>

</div>

如要绑定数据吧可以这样写:

正文转自:http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8

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’)

);

运作效果如下:

皇冠现金app 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探索(一):背景、规划和风险

相关文章