React.createClass 和 extends React.Component

常用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'
};