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