Pro e contro del componente nativo reattivo rispetto a React.createClass per implementare i componenti dell'interfaccia utente?

Question

Quali sono i vantaggi dell'uno rispetto all'altro?

Uno viene deprecato e dovrei usare quello più recente quale che sia?

Devo creare componenti o classe di reazione per sviluppare l'interfaccia utente?

Vedo alcuni esempi utilizzando Componente. Per esempio:

export default class ItemList extends Component { 
    constructor(props) { 

    //binding functions 
    this.renderHeader = this.renderHeader.bind(this); 
    this.renderRow = this.renderRow.bind(this); 

    super(props); 
    this.state = { 
     dataSource: this.props.state.planDataSource, 
     planName: null 
    } 
} 

E altri usando

var ItemList = React.createClass({ 

    getInitialState: function() { 
    return { 
     dataSource: this.props.state.planDataSource, 
     planName: null 
    }; 
    }, 

sto imparando reagisco-native con l'esempio e io sono confuso su quale è preferito.

Ho recentemente convertito una classe React in un componente e ho scoperto che il puntatore "this" non funziona perché le classi React utilizzavano l'autobinding ei componenti richiedono un binding esplicito.

Answer 1

Si dovrebbe preferire la classe su createClass perché probabilmente sarà deprecato.

La nuova caratteristica più notevole è il supporto per le classi ES6, che consente agli sviluppatori di avere maggiore flessibilità durante la scrittura dei componenti. Il nostro obiettivo finale è che le classi ES6 sostituiscano completamente React.createClass, ma finché non avremo un sostituto per gli attuali casi d'uso del mixin e il supporto per gli inizializzatori delle proprietà di classe nella lingua, non pensiamo di deprecare React.createClass.

https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html

No Autobinding

metodi seguono la stessa semantica come normali classi ES6 , nel senso che non si legano automaticamente questo all'istanza . Dovrai utilizzare esplicitamente .bind (this) o le funzioni freccia =>.

No Mixin

Purtroppo ES6 lanciato senza alcun supporto mixin. Pertanto, non è disponibile alcun supporto per i mixin quando si utilizza React con le classi ES6 . Al contrario, stiamo lavorando per semplificare il supporto di tali casi d'uso senza ricorrere ai mixin.

https://facebook.github.io/react/docs/reusable-components.html

Answer 2

A meno che non si sta utilizzando mixins, utilizzare sempre di classe (leggi ES6) invece di React.createClass. La maggior parte del codice nativo reattivo è in ES6, quindi aiuta a rimanere aggiornato con gli standard attuali.

Non ci sono differenze in termini di prestazioni/UI. class (ES6) è un modo migliore di scrivere codice reagire/reagire-nativo/JS comunque. FWIW: http://es6-features.org/.

Answer 3

Come ho visto in te commentare, siete alla ricerca di una risposta in parole semplici:

quando guardando l'esempio che fornisci nella sua interrogazione, si potrebbe pensare "Oh mio, perché dovrei usare questo versione più prolissa con extends Component se fondamentalmente equivale a createClass? "

Bene, la sintassi che utilizza extends Component è il modo moderno di scrivere i componenti dell'interfaccia utente React Native e il codice Javascript in generale. È necessario attenersi a questo tutto il tempo a meno che non si abbia bisogno di una funzione speciale denominata mixins poiché l'utilizzo del modo di scrivere createClass potrebbe presto essere deprecato in React Native come indicato dalle altre risposte.

si chiama questa versione moderna di Javascript ECMAScript 6 (con il suo compilatore chiamato babel che traduce la nuova sintassi JavaScript nel vecchio uno in modo che che i browser attuali possono tutti capirlo). Ha introdotto questo nuovo modo più orientato agli oggetti di scrivere Javascript con le classi.

La denominazione in React è piuttosto confusa quando si inizia la transizione alla nuova sintassi JS, poiché la sintassi precedente con createClass non fa parte della nuova sintassi orientata agli oggetti con classi, metodi e così via. This article contrasta piacevolmente le differenze tra i due stili di sintassi che hai chiesto nella tua domanda.

---

Come Tipp aggiuntiva, non c'è bisogno di legare questo per le funzioni (ad esempio this.renderHeader = this.renderHeader.bind(this); nel tuo esempio, se si definiscono le funzioni personalizzate utilizzando un'altra caratteristica di ECMAScript 6 chiamata arrow functions. Questo elimina immediatamente altre due linee codice del tuo esempio e i due approcci richiedono più o meno la stessa quantità di digitazione