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