react---react组件创建，通过React.createClass方法与class App extends Component方法的区别

createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。

---

React.createClass和extends Component的区别主要在于：

1、语法区别2、propType 和 getDefaultProps3、状态的区别4、this区别5、Mixins

1、语法区别

• React.createClass

import React from 'react';const Contacts = React.createClass({    render() {    return (      <div></div>    );  }});export default Contacts;  

• React.Component

import React from 'react';class Contacts extends React.Component {    constructor(props) {    super(props);  }  render() {    return (      <div></div>    );  }}export default Contacts;  //这种方法使用es6的语法，通过class定义构造函数，constructor构造默认是属性和状态

2、proType和getDefaultProps

• React.createClass：

//通过proTypes对象和getDefaultProps()方法来设置和获取propsimport React from 'react';const Contacts = React.createClass({    propTypes: {    name: React.PropTypes.string  },  getDefaultProps() {    return {    };  },  render() {    return (      <div></div>    );  }});export default Contacts;  

• React.Component：

//通过设置两个属性propTypes和defaultPropsimport React form 'react';class TodoItem extends React.Component{    static propTypes = { // as static property        name: React.PropTypes.string    };    static defaultProps = { // as static property        name: ''    };    constructor(props){        super(props)    }    render(){        return <div></div>    }}

3、状态的区别

• React.createClass：

//通过getInitialState()方法返回一个包含初始值的对象import React from 'react';let TodoItem = React.createClass({    // return an object    getInitialState(){         return {            isEditing: false        }    }    render(){        return <div></div>    }})

• React.Component：

//通过constructor设置初始状态import React from 'react';class TodoItem extends React.Component{    constructor(props){        super(props);        this.state = { // define this.state in constructor            isEditing: false        }     }    render(){        return <div></div>    }}

4、this区别:

• React.createClass：

///会正确绑定thisimport React from 'react';const Contacts = React.createClass({    handleClick() {    console.log(this); // React Component instance  },  render() {    return (      <div onClick={this.handleClick}></div>//会切换到正确的this上下文    );  }});export default Contacts;  

• React.Component：

//由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。import React from 'react';class TodoItem extends React.Component{    constructor(props){        super(props);    }    handleClick(){        console.log(this); // null    }    handleFocus(){  // manually bind this        console.log(this); // React Component Instance    }    handleBlur: ()=>{  // use arrow function        console.log(this); // React Component Instance    }    render(){        return <input onClick={this.handleClick}                               onFocus={this.handleFocus.bind(this)}                                onBlur={this.handleBlur}/>    }}

我们还可以在 constructor 中来改变 this.handleClick 执行的上下文，这应该是相对上面一种来说更好的办法，万一我们需要改变语法结构，这种方式完全不需要去改动 JSX 的部分：

import React from 'react';class Contacts extends React.Component {    constructor(props) {    super(props);    this.handleClick = this.handleClick.bind(this);  }  handleClick() {    console.log(this); // React Component instance  }  render() {    return (      <div onClick={this.handleClick}></div>    );  }}export default Contacts;  

5、Mixins区别

如果我们使用 ES6 的方式来创建组件，那么 React mixins 的特性将不能被使用了。

React.createClass：使用 React.createClass 的话，我们可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。

import React from 'react';let MyMixin = {    doSomething(){}}let TodoItem = React.createClass({    mixins: [MyMixin], // add mixin    render(){        return <div></div>    }})

自—–