React ES5与ES6语法写法比较
安装
从React官网找到安装地址，下载html文件，查看源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
文件首先加载了“react.js” “react-dom.js”两个最基本的库与DOM操作相关的 功能。后又加载了”babel.min.js“ ，官方建议：它会执行一个缓慢的运行时代码转换，所以不要在生产环境使用它。
官网上还提供另外两种安装React的方法。
Hello，World
万丈高楼平地起，万行代码起于此。每个新编码都从hello，world说起，这个也不例外。分析”安装“里提到的文件。
可以看到在<body> 标签中添加了<script type="text/babel"> ，这是代表使用了JSX语法。
在Html文件中有<div id="root"></div> 这样的根节点。要渲染一个React元素到一个根DOM节点，把他们传递给ReacDOM.render()方法。如上图所示。
组件Components
React 中可以将代码封装成一个个可以复用的组件，并且可以对每个组件进行单独设置，比如进度条这种组件。可以用在音乐播放进度，亦可以用在音量控制。
组件命名第一个字母必须大写，因为组件必须返回一个单独的根元素，所以组件类的顶级标签只能有一个，否则会报错。如里面有两个元素，顶层需要用一个<div>元素将其包裹起来。
使用ES6定义一个组件：
<script type="text/babel">
class HelloComponents extends React.Component{
render(){
return (
<div>
<h1>Hello,Components</h1>
<p>this is use ES6</p>
</div>
)
}
}
ReactDOM.render(
<HelloComponents />,
document.getElementById('root')
);
</script>使用ES5定义一个组件：
<script type="text/babel">
var HelloComponents = React.createClass({
render:function(){
return(<h1>Hello,Components (use ES5)</h1>)
}
})
ReactDOM.render(
<HelloComponents />,
document.getElementById('root')
);
</script>默认属性props
可以给组件设置相关的特性，其是不可更改的。有别于下文的state
使用ES6来设置默认属性：
在组件外，使用组件.defaultProps 设置组件的固有属性。
<script type="text/babel">
class SetProps extends React.Component{
render(){
return (
<div>
<h1>Hello,{this.props.name}</h1>
<p>{this.props.name}的性别是：{this.props.sex}</p>
<p>this is use ES6</p>
</div>
)
}
}
SetProps.defaultProps = {
name:"LiLei",
sex:"male",
}
ReactDOM.render(
<SetProps />,
document.getElementById('root')
);
</script>使用ES5来设置默认属性：
使用getDefaultProps方法设置默认属性。
<script type="text/babel">
var SetProps = React.createClass({
getDefaultProps:function(){
return {
name:"HanMeiMei",
sex:"Female"
}
},
render:function(){
return(
<div>
<h1>Hello,{this.props.name}</h1>
<p>{this.props.name}的性别是：{this.props.sex}</p>
<p>this is use ES5</p>
</div>)
}
})
ReactDOM.render(
<SetProps />,
document.getElementById('root')
);
</script>需要注意的是在ES5中每个方法的结尾需要用逗号来分隔开。因为其是对象的方法。
初始化状态State
也是用来设置组件的特性，但是可以随着用户的交互而发生改变，区别于props。
不要直接修改state，需要使用this.setState()方法
使用ES6来设置状态：
在constructor 中使用 this.state 设置初始状态。其中 constructor 方法不设置的时候默认添加。
<script type="text/babel">
class SetProps extends React.Component{
constructor(){
super();
this.state={
age:18,
}}
render(){
return (
<div>
<h1>Hello,{this.props.name}</h1>
<p>{this.props.name}的性别是：{this.props.sex},年龄是{this.state.age}</p>
<p>this is use ES6</p>
</div>
)
}
}
SetProps.defaultProps = {
name:"LiLei",
sex:"male",
}
ReactDOM.render(
<SetProps />,
document.getElementById('root')
);
</script>使用ES5来设置状态：
使用getInitialState 方法设置初始状态。
var SetProps = React.createClass({
getDefaultProps:function(){
return {
name:"HanMeiMei",
sex:"Female"
}
},
getInitialState :function(){
return {age:20}
},
render:function(){
return(
<div>
<h1>Hello,{this.props.name}</h1>
<p>{this.props.name}的性别是：{this.props.sex},年龄是:{this.state.age}</p>
<p>this is use ES5</p>
</div>)
}
})
ReactDOM.render(
<SetProps />,
document.getElementById('root')
);
</script>Function 函数
使用ES6来设置函数：
方法不会自动绑定 this 到实例中，需要在构造函数中显示的使用.bind(this):
下面这个例子，当用户点击按钮时，会更改状态，也就是本例中的age值。
<script type="text/babel">
class SetFunction extends React.Component{
constructor(){
super();
this.state={
age:18,
};
//这句是必须的。
this.ChangeAge = this.ChangeAge.bind(this);
}
ChangeAge(){
//this.setState此方法修改状态值。
this.setState({
age : this.state.age + 1
})
}
render(){
return (
<div>
<h1>Hello,{this.props.name}</h1>
<p>{this.props.name}的性别是：{this.props.sex},年龄是:{this.state.age}</p>
<p>this is use ES6</p>
<button type="button" onClick={this.ChangeAge}>change age</button>
</div>
)
}
}
SetFunction.defaultProps = {
name:"LiLei",
sex:"male",
}
ReactDOM.render(
<SetFunction />,
document.getElementById('root')
);
</script>如果不想显式的在类构造函数中绑定this，亦可以使用 箭头函数进行书写：
以上面的代码作为实例(-代表删去此行。+代表增加或修改此行)：
- this.ChangeAge = this.ChangeAge.bind(this);
+ <button type="button" onClick={(e)=>this.ChangeAge(e)}>change age</button>使用ES5来设置函数：
方法可以自行绑定。
<script type="text/babel">
var SetProps = React.createClass({
getDefaultProps:function(){
return {
name:"HanMeiMei",
sex:"Female"
}
},
getInitialState :function(){
return {age:20}
},
//设置函数
ChangeAge:function(){
this.setState({
age:this.state.age+ 1
})
},
render:function(){
return(
<div>
<h1>Hello,{this.props.name}</h1>
<p>{this.props.name}的性别是：{this.props.sex},年龄是:{this.state.age}</p>
<p>this is use ES5</p>
//给button绑定函数
<button type="button" onClick={this.ChangeAge}>ChangeAge</button>
</div>)
}
})
ReactDOM.render(
<SetProps />,
document.getElementById('root')
);
</script>