React中的无状态组件和有状态组件

React中创建组件的方式

1. ES5的写法：React.createClass( {} )，接受一个对象参数，且参数内必须含有render函数，通过render函数返回一个组件实例，如

import React from 'react' 
import ReactDOM from 'react-dom' 
const SwitchButton = React.createClass({ 
	getDefaultProp:function() { 
		return { open: false } 
	}, 
	getInitialState: function() { 
		return { open: this.props.open };
	 }, 
	 handleClick: function(event) { 
	 	this.setState({ open: !this.state.open }); 
	 }, 
	 render: function() { 
	 	var open = this.state.open, 
	 	className = open ? 'switch-button open' : 'btn-switch'; 	
	 	return ( 
	 		<label className={className} onClick={this.handleClick.bind(this)}> 
	 			<input type="checkbox" checked={open}/>男
	 		 </label> 
	 	);
	  } 
}); 
ReactDOM.render( <SwitchButton />, document.getElementById('root') );

这种方法创建的组件是有状态的组件，这些组件是可以被实例化的，可以访问其生命周期函数。
2. ES6的写法：React.component( {} )，如：

import React from 'react' 
import ReactDOM from 'react-dom' 
class SwitchButton extends React.Component { 
	constructor(props) { 
		super(props) ;
		this.state = { open: this.props.open } 
		this.handleClick = this.handleClick.bind(this) 
	} 
	handleClick(event) { 
		this.setState({ open: !this.state.open }) 
	}
	 render() {
	 	 let open = this.state.open, 
	 	 className = open ? 'switch-button open' : 'btn-switch' 
	 	 return ( 
	 	 	<label className={className} onClick={this.handleClick}>
	 	 		 <input type="checkbox" checked={open}/> 男
	 	 	 </label> 
	 	 ) } 
	 }
 SwitchButton.defaultProps = { open: false } 
 ReactDOM.render( <SwitchButton />, document.getElementById('root') )

3. 无状态函数的写法：所谓函数写法就只是纯粹的为了展示一个组件而存在，如：

 function HelloComponent(props) {
    return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="marlon" />, mountNode)

使用箭头函数改进：

const Todo = (props) => ( 
	<li 
		onClick={props.onClick}
		style={{textDecoration: props.complete ? "line-through" : "none"}}
	 >
	  {props.text}
 </li> 
 )

也可以使用ES6的解构赋值：

const Todo = ({ onClickmcomplete,text,...props }) => ( 
	<li 
		onClick={onClick}
		style={{textDecoration: complete ? "line-through" : "none"}}
	 >
	  {text}
 </li> 

无状态组件一般会搭配高阶组件来使用（HOC）。无状态组件可以用来分割大型组件。无状态组件内部可以使用ref，但是不能被this.refs访问到。

前两者的区别：

1. 默认属性
   在react.createClass中，使用propTypes进行属性类型检查，使用getDefaultprops() 获取属性，返回一个对象。
   在React.component中，使用 类名.propTypes，进行检查属性类型，这时它是作为类的属性，而不是作为createClass定义的Object的一部分。使用类名.defaultProps获取默认属性，这时它只是一个简单的对象而不是获取对象的方法。
2. 初始化state的区别
   在createClass中，使用 getInitialState 函数返回一个初始化的对象；
   在React.component中，使用 构造函数 constructor用来包含所有需要初始化的属性。
3. this的指向
   createclass会自动将this绑定到组件实例上，而react.compomponent不会，需要我们手动bind。
4. mixins
   creata.class支持混入，而ES6不支持