常用extends React.Component ,以下是一些二者区别:
1.初始化state时候的区别
用createClass创建的组件需要使用函数getInitialState()函数如:
import React from 'react';
const Person= React.createClass({
getInitialState () {
return {
title:'顺着网线来打我呀'
};
},
render() {
return (
<div>{this.state.title}</div>
);
}
});
export default Person;
用 React.Component可以使用constructor(props)方法 更加接近js的原生语法,少了React的一些样板代码
import React from 'react';
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
title:'顺着网线来打我呀'
};
}
render() {
return (
<div>{this.state.title}</div>
);
}
}
export default Person ;
2.this的区别
import React from 'react';
const Person= React.createClass({
getInitialState () {//在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props
return {
title:'顺着网线来打我呀'
};
},
onClick(){
console.log('我被点击了');
}
render() {
return (
<div onClick={this.onClick}>{this.state.title}</div>
);
}
});
export default Person;
import React from 'react';
class Person extends React.Component {
constructor(props) {
super(props);
this.onClick= this.onClick.bind(this);
}
onClick() {
}
render() {
return (
<div onClick={this.onClick}></div>
);
}
}
export default Person ;
或者
import React from 'react';
class Person extends React.Component {
constructor(props) {
super(props);
}
onClick=()=>{ //使用箭头函数
}
render() {
return (
<div onClick={this.onClick}></div>
);
}
}
export default Person ;
3.propTypes 的区别
propTypes用于检测传入该组件的props中属性的值是否符合我们在propTypes中设置数据类型
import React from 'react';
const Person= React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,//要求传入的title值必须是字符串,如果传入其他类型,控制台会报错提示
},
render() {
return (
<div>{this.props.title}</div>
);
}
});
export default Person;
import React from 'react';
class Person extends React.Component {
constructor(props) {
super(props);
this.onClick= this.onClick.bind(this);
}
onClick() {
}
render() {
return (
<div onClick={this.onClick}></div>
);
}
}
Person.propTypes={
title: React.PropTypes.string.isRequired,
}
export default Person ;
4.react组件的默认状态(defaultProps)
import React from 'react';
const Person= React.createClass({
getDefaultProps() {
return {
name:'default name'
};
},
render() {
return (
<div>{this.props.name}</div>
);
}
});
export default Person;
class Person extends React.Component {
constructor(props){
super(props);
this.state={
name:props.name
};
}
render(){
return<div>{this.props.name}</div>
}
}
Person .defaultProps={
name:'default name'
};