React.createClass против расширяет компонент

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 против extendingComponent.

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

Здесь мы имеем константный с классом React присвоенной с важной функцией визуализации вслед, чтобы завершить типичное определение базового компонента.

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; 

С точки зрения JavaScript мы сейчас, используя классы ES6, как правило, это будет использоваться с чем-то вроде Вавилонской для компиляции ES6 в ES5, чтобы работать в других браузерах. С этим изменением введем конструктор , где нам нужно позвонить super(), чтобы передать реквизиты на React.Component.

Для Реагировать изменения, мы теперь создать класса под названием «Контакты» и расширить от React.Component вместо обращающегося React.createClass непосредственно, который использует меньше Реагировать шаблонный и больше JavaScript. Это важное изменение, чтобы отметить дальнейшие изменения, возникающие при смене синтаксиса.

More