React.createClass vs estende Componente

Question

Qual è la differenza tra

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

Per

class MyClass extends React.Component{...} 

Answer 1

Questi due modi dipendono da se si utilizza la sintassi ES6 o no, e cambiano anche il modo in cui si imposta il tuo stato iniziale

Quando si utilizzano classi ES6, è necessario inizializzare lo stato in constructor.

Quando si utilizza React.createClass, è necessario utilizzare la funzione getInitialState.

ES6 Classe Sintassi:

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

ES5 React.CreateClass sintassi:

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

Questi saranno entrambi funzionano allo stesso modo per impostare lo stato iniziale.

Answer 2

Con la sintassi class MyClass extends React.Component{...},

non è possibile utilizzare mixins e avete bisogno di impegnare la contesto del metodo da soli

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

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

a me queste sono le maggiori differenze.

per sostituire il mixin, è possibile utilizzare un contenitore per avvolgere il componente

export default Container(MyClass); 

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

Answer 3

Un importante elemento di differenziazione non precedentemente indicate è come il state è ereditata quando si utilizza createClass vs extending un 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

Qui abbiamo un const con una classe Reagire assegnato, con l'importante funzione di rendere seguente per completare una definizione tipico componente di base.

import React from 'react'; 

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

export default Contacts; 

React.Component

Prendiamo la definizione React.createClass sopra e convertirlo per usare una classe ES6.

import React from 'react'; 

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

export default Contacts; 

Dal punto di vista JavaScript stiamo ora utilizzando le classi ES6, in genere questo sarebbe stato utilizzato con una cosa del genere Babel per compilare l'ES6 per ES5 a lavorare in altri browser. Con questo cambiamento, introduciamo il costruttore , dove dobbiamo chiamare il super() per passare gli oggetti di scena a React.Component.

Per i cambiamenti reagire, ora creare un classe chiamati “Contatti” e estendono da React.Component invece di accedere React.createClass direttamente, che utilizza meno Reagire boilerplate e più JavaScript. Questa è una modifica importante per notare ulteriori modifiche apportate da questo scambio di sintassi.

More