使用ES6 class可以以一个JavaScript类来定义React Class。
1、使用React.createClass：
var Counter = React.createClass({
propTypes: {
initial: React.PropTypes.number
},
getDefaultProps: function() {
return {initial: 0};
},
getInitialState: function() {
return {count: this.props.initial};
},
count: function() {
this.setState({count: this.state.count + 1});
},
render() {
return (
<div onClick={this.count}>
Click times： {this.state.count}
</div>
);
}
});
ReactDOM.render(
<Counter />,
document.getElementById("timeBox")
);
2、使用ES6 class：
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initial};
}
count() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.count.bind(this)}>
Click times：{this.state.count}
</div>
);
}
}
Counter.propTypes = {
initial: React.PropTypes.number
};
Counter.defaultProps = {
initial: 0
};
ReactDOM.render(
<Counter />,
document.getElementById("timeBox")
);
3、使用ES6 class与React.createClass的不同：
① React.createClass提供getInitialState 方法，而ES6 class在构造函数里设置初始的state；
② React.createClass提供getDefaultProps方法和propTypes 属性，而propTypes 和 defaultProps 在ES6 class的构造函数里被定义为属性，而不是在class body里。
③ ES6 class中不会自动绑定this到实例上，必须显示的使用.bind(this) 或使用箭头函数 =>：
正确用法1：
<div onClick={this.count.bind(this)}>
正确用法2：
<div onClick={() => this.count()}>
错误用法：
<div onClick={this.count}>
建议在构造函数中绑定事件处理器，以便对于所有实例只需绑定一次：
constructor(props) {
super(props);
this.count =this.count.bind(this);
this.state = {count: props.initial};
}
直接使用：
<div onClick={this.count}>
4、无状态函数
1) 可以用JavaScript函数来定义React类，如使用无状态函数语法：
function MyBox(props) {
return <div>Hello, {props.name}</div>;
}
ReactDOM.render(
<MyBox name="react"/>,
document.getElementById("timeBox")
);
2) 可以使用ES6箭头函数来定义React类：
const MyBox = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(
<MyBox name="react"/>,
document.getElementById("timeBox")
);
上述两种方法用于纯函数态的组件，必须没有保持任何内部状态，没有备份实例，也没有组件生命周期方法。
大多数组件都应该是无状态函数，如果可能，这将是推荐的模式。
3) 仍然可以以设置函数属性的方式来指定 propTypes 和 defaultProps：
① 用JavaScript函数：
function MyBox(props) {
return <div>Hello, {props.name}</div>;
}
MyBox.propTypes = {
name: React.PropTypes.string
};
MyBox.defaultProps = {
name: "react"
};
ReactDOM.render(
<MyBox name="react"/>,
document.getElementById("timeBox")
);
② 使用ES6箭头函数：
const MyBox = (props) => <div>Hello {props.name}</div>;
MyBox.propTypes = {
name: React.PropTypes.string
};
MyBox.defaultProps = {
name: "react"
};
ReactDOM.render(
<MyBox name="react"/>,
document.getElementById("timeBox")
);