createClass
在没有使用ES6语法的时候我们可以使用此方法来定义组件
var React = require('react');
var Greeting = React.createClass({
propTypes: {
name: React.PropTypes.string // 属性校验
},
getDefaultProps: function() {
return {
name: 'Mary' // 默认属性值
}
},
getInitialState: function() {
return {count: this.props.initialCount}; // 初始化state
},
handleClick: function() {
// 用户的点击事件处理函数
},
render: function() {
return <h1>Hello, {this.props.name}</h1>;
},
});
module.exports = Greeting;
注意：在 createClass 中，React 对属性中的函数都进行了 this 绑定，也就是如上面的 handleClick 其实相当于 handleClick.bind(this)。
component
ES6对类和继承有语法级别的支持，所以用ES6创建组件的方式更加优雅
import React from 'react';
class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = { count: this.props.initialCount };
this.handleClick = this.handleClick.bind(this);
}
//static defaultProps = {
// name: 'Mary' // 定义defaultprops的另一种方式
//}
//static propTypes = {
// name: React.PropTypes.string // 属性校验的另一种方式
//}
handleClick() {
// 点击事件处理函数
}
render() {
return <h1>hello, {this.props.name}</h1>
}
}
Greeting.propTypes = {
name: React.PropsTypes.string
};
Greeting.defaultProps = {
name: 'Mary'
};
export default Greeting;
注意：Greeting 继承自 React.Component ；在构造函数中，通过 super() 来调用父类的构造函数，state是在构造函数中通过 this.state 来进行赋值的，组件的props是在类Greeting上创建的。
用这种方式创建组件的时候，React 并没有对内部函数，进行 this 绑定，所以，如果在回调函数中保持正确的 this ，需要手动对函数进行 this 绑定，如上面的 handleClick 函数，在构造函数中对 this 进行了绑定。
PureComponent
当组件的 props 或者 state 发生变化的时候，React会对组件当前的 Props 和 State 分别与nextProps 和 nextState 进行比较，当发现变化时，就会对当前组件以及子组件进行重新渲染，否则就不渲染。有时候为了避免组件进行不必要的重新渲染，我们可以通过定义 shouldComponentUpdate 来优化性能。
class CounterButton extends React.Component {
constructor(props) {
super(props);
this.state = {count:1};
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== this.nextProps.color) {
return true;
}
if (this.state.count !== this.nextState.count) {
return true;
}
return false;
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
)
}
}
export default CounterButton;
注意：shouldComponentUpdate 通过判断 props.color 和 state.count 是否发生变化来决定需不需要重新渲染组件，当然有时候这种简单的判断，显得多余和样板话，于是 React 就提供了PureComponent来自动帮我们做这件事，这样就不需要手动来写shouldComponentUpdate了
class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: 1};
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
注意： 大多数情况下， 我们使用 PureComponent 能够简化我们的代码，并且提高性能，但是 PureComponent 的自动为我们添加的shouldComponentUpate 函数，只是对 props 和 state 进行浅比较(shadow comparison)，当 props 或者 state 本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的 props 和 state 发生了变化，但组件却没有更新的问题。
你可以考虑使用 Immutable.js 来创建不可变对象，通过它来简化对象比较，提高性能。
Stateless Functional Component
上面创建组件的方式，都是用来创建包含状态和用户交互的复杂组件，当组件本身只是用来展示，所有数据都是通过 props 传入的时候，我们可以使用 Stateless Functional Component 来快速创建组件。
import React from 'react';
const Button = ({ day, increment }) => {
return (
<div>
<button onClick={increment}>Today id {day}</button>
</div>
);
}
Button.propsTypes = {
day: propTypes.string.isRequired,
increment: propTypes.func.isRequired,
}
export default Button;
注意：这种组件，没有自身的状态，相同的 props 输入，必然会获得完全相同的组件展示。因为不需要关心组件的一些生命周期函数和渲染的钩子，所以不用继承自 Component 显得更简洁。
