React.createClass VS扩展组件

Question

什么

var MyClass = React.createClass({...}); 

之间的不同，以

class MyClass extends React.Component{...} 

Answer 1

这两种方式取决于如果您正在使用ES6语法与否，他们也改变设定的方式你的初始状态。

使用ES6类时，您应该初始化constructor中的状态。

使用React.createClass时，您必须使用getInitialState函数。

ES6类语法：

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { /* initial state, this is ES6 syntax (classes) */ }; 
    } 
} 

ES5 React.CreateClass语法：

var MyComponent = React.createClass({ 
    getInitialState() { 
    return { /* initial state */ }; 
    }, 
}); 

这些都将同样的方式工作，以建立初始状态。

Answer 2

随着class MyClass extends React.Component{...}语法，

不能使用的混入，你需要的方法自己

class MyClass extends Component { 
    constructor() { 
    super(); 
    this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(...); 
    } 
} 

的情况下绑定到我这是最大的区别。

更换混入，你可以使用一个容器来包装你的组件

export default Container(MyClass); 

function Container(Component) { 
    var origin = Component.prototype.componentDidMount; 
    Component.prototype.componentDidMount = function() { 
     origin.apply(this, arguments); 
     /* do mixin */ 
    } 
} 

Answer 3

一个主要区别不是上面提到的是state如何使用createClass VS extending一个Component时继承。

var BaseComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     foo: 'bar' 
    }; 
    } 
}); 

var BaseClass = React.createClass({ 
    getInitialState() { 
    return { 
     foo: 'bar' 
    }; 
    } 
}); 

class Test extends BaseClass { // or extend BaseComponent 
    constructor(props){ 
    super(props); 
    this.state = { 
     ...this.state, 
     myNewVar: 'myNewVal' 
    } 

    render() { 
    alert(this.state.foo) 
    } 
} 

Answer 4

React.createClass

在这里，我们有分配阵营类常量，具有重要的渲染功能，下面就来完成一个典型的基础组件定义。

import React from 'react'; 

const Contacts = React.createClass({ 
    render() { 
    return (
    <div></div> 
    ); 
    } 
}); 

export default Contacts; 

React.Component

让我们以上述React.createClass定义，并将其转换为使用ES6类。

import React from 'react'; 

class Contacts extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
    <div></div> 
); 
} 
} 

export default Contacts; 

从现在开始我们使用ES6类一个JavaScript的角度来看，这通常会用像巴贝尔用来编译器ES6到ES5在其他浏览器。有了这个变化，我们引入了构造函数，我们需要调用super（）将道具传递给React.Component。

对于变化做出反应，我们现在创建一个类所谓的“联系人”和延长从React.Component而不是访问React.createClass直接，使用较少阵营样板和更多的JavaScript。这是一个重要的改变，要注意这个语法交换带来的进一步变化。

More