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}/>
<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方式。