开发经验—react创建组件的三种方法

1、函数定义的无状态组件

function Add(props){
    	return <h1>hello,{props.name}</h1>
    }
    ReactDOM.render(<Add name="仙女"/>,document.getElementById('app'))

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：
1、渲染性能得到提升，因为函数声明的无状态组件不会被实例化
函数实现是不会被实例化的，从而节省内存，性能得到提升
2、组件不能访问this对象
没有实例化，所以不会创建对象，就不能访问组件的this对象。
3、没有组件的生命周期方法
函数创建的组件没有继承React.Component，它只是单纯的js函数能够被Babel编译，所以不具备React组件的生命周期函数。
无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

为了我们程序的性能方面的考虑，所以在编写react应用时，能用函数定义组件就尽量使用函数定义组件。

2、es5原生方式createReactClass定义的组件

var Add=createReactClass({         //和Add=React.createClass是一样的，写法不同
    getDefaultProps: function() {  //在这个函数设置属性默认值
    return 
    {name: 'Mary'};
    },
    getInitialState: function() {  //在这个函数中初始化函数状态
    return {message: 'Hello!'};
     },
    handleClick: function() {     //自定义函数自动绑定this指向组件实例
    alert(this.state.message);
     },
    render: function() {
    return <h1>{this.props.name}</h1>
    }
   });
    ReactDOM.render(<Add name="hah"/>,document.getElementById('app'))

特点：
1、编写要相对复杂，相对而言，难以上手
es5创建组件还有一个mixins 功能，大家可以访问React官网了解。不使用es6
2、自定义方法不用手动绑定this

3、React.Component

class Axios extends React.Component{
    		constructor(props){    //组件构造方法，在这里初始化状态
    			super(props);
    			this.state={value:''}
    			this.onchange=this.onchange.bind(this)  //组件自定义函数，绑定this指向组件实例
    			this.onclick=this.onclick.bind(this)
    		}
    		onchange(event){                      
    		  let value1=event.target.value;
    		  this.setState({
    		  	value:value1
    		  })
    		}
    		onclick(){
    		let tel=this.state.value;
    		if(/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel)){
    		  let url='http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel
    		  axios.get(url)
    		  .then(response){
    		  	alert(response.callName)
    		  }
    		}
    		else{
    			alert('您输入的号码有误，请重新输入！')
    		}
    		}
    		render(){
    			return(
    				<div>
    				<input type="text" placeholder="请输入您的完整号码：" value={this.state.value} onChange={this.onchange}/>&nbsp;&nbsp;
    				<button onClick={this.onclick}>查询</button>
    				</div>
    			)
    		}
    	}
    	ReactDOM.render(<Axios/>,document.getElementById('app'));

与es5创建组件相比
1、es6方法创建组件的自定义函数需要手动绑定this.
2、组件属性类型propTypes及其默认props属性defaultProps配置不同
3、组件初始状态state的配置不同
4、Mixins的支持不同
es6不支持Mixins，但是es6有高阶组件，相对而言，更编码简单，更自然直观。

如何选择创建组件的方法
组件没有状态相对简单时，使用函数定义的无状态组件，有状态时尽量使用React.Component方式。