React.createClass和extends Component的区别

语法区别
propType 和 getDefaultProps
状态的区别
this区别
Mixins

语法区别

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的语法，用constructor构造器来构造默认的属性和状态。

propType 和 getDefaultProps

React.createClass：通过proTypes对象和getDefaultProps()方法来设置和获取props.

import React from 'react';const Contacts = React.createClass({  propTypes: {name: React.PropTypes.string},getDefaultProps() {return {};},render() {return (<div></div>);}
});export default Contacts;

React.Component：通过设置两个属性propTypes和defaultProps

import React form 'react';
class TodoItem extends React.Component{static propTypes = { // as static propertyname: React.PropTypes.string};static defaultProps = { // as static propertyname: ''};constructor(props){super(props)}render(){return <div></div>}
}

状态的区别

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 constructorisEditing: false} }render(){return <div></div>}
}

this区别

React.createClass：会正确绑定this

import 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 thisconsole.log(this); // React Component Instance
    }handleBlur: ()=>{  // use arrow functionconsole.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;

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>}
})

转载于:https://www.cnblogs.com/liuna/p/7232674.html