Vor- und Nachteile der reaktionsnativen Komponente im Vergleich zur React.createClass zur Implementierung von UI-Komponenten?

Question

Was sind die Vorteile von einem gegenüber dem anderen?

Wird einer veraltet und ich sollte den neueren verwenden, was auch immer das sein mag?

Sollte ich Komponenten oder React Class erstellen, um meine UI zu entwickeln?

Ich sehe einige Beispiele mit Component. Zum Beispiel:

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 
    } 
} 

Und andere mit

var ItemList = React.createClass({ 

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

ich mit gutem Beispiel reagieren-native lerne und ich bin verwirrt, was bevorzugt ist.

Ich habe vor kurzem eine React-Klasse in eine Komponente konvertiert und festgestellt, dass der "This" -Zeiger nicht funktioniert, da React-Klassen Autobinding und Komponenten explizite Bindung verwendet.

Answer 1

Sie sollten Class über createClass bevorzugen, weil es wahrscheinlich veraltet sein wird.

Die bemerkenswerteste neue Funktion ist die Unterstützung von ES6-Klassen, die Entwicklern mehr Flexibilität beim Schreiben von Komponenten ermöglicht. Unser letztendliches Ziel ist es, dass ES6-Klassen React.createClass vollständig ersetzen, aber bis wir einen Ersatz für aktuelle Mixin-Anwendungsfälle und Unterstützung für Klasseneigenschaftsinitialisierer in der Sprache haben, planen wir nicht, React.createClass abzulehnen.

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

Kein Autobinding

Methoden folgen die gleiche Semantik wie regelmäßige ES6 Klassen, was bedeutet, dass sie nicht automatisch diese binden an die Instanz. Sie müssen explizit .bind (this) oder Pfeilfunktionen => verwenden.

Kein Mixins

Leider startete ES6 ohne mixin Unterstützung. Daher gibt es keine Unterstützung für Mixins, wenn Sie React mit ES6 Klassen verwenden. Stattdessen arbeiten wir daran, solche Anwendungsfälle einfacher zu unterstützen, ohne auf Mixins zurückgreifen zu müssen.

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

Answer 2

Es sei denn, Sie Mixins verwenden, immer Klasse verwenden (read ES6) statt React.createClass. Der Großteil des reaktiven nativen Codes befindet sich in ES6, daher hilft es, mit den aktuellen Standards Schritt zu halten.

Es gibt keinen Unterschied in Bezug auf Leistung/UI. Klasse (ES6) ist eine bessere Art zu schreiben, reagieren/native/JS Code sowieso. FWIW: http://es6-features.org/.

Answer 3

Als ich in euch Kommentar sah, du bist eine Antwort in einfachen Worten suchen:

Wenn am Beispiel suchen Sie in Ihrer Frage zur Verfügung stellen, könnten Sie „Oh mein denken, warum sollte ich diese verwenden mehr ausführliche Version mit extends Component, wenn es im Grunde dasselbe wie createClass tut? "

Nun, die Syntax mit extends Component ist die moderne Art des Schreibens von React Native UI-Komponenten und Javascript-Code im Allgemeinen. Sie sollten die ganze Zeit dabei bleiben, es sei denn, Sie benötigen eine spezielle Funktion namens mixins, da die Verwendung der createClass Art des Schreibens von Komponenten bald in React Native veraltet sein könnte, wie in den anderen Antworten darauf hingewiesen wird. Diese moderne Version von Javascript

ist ECMAScript 6 (mit seinem Compiler namens babel, die die neue JavaScript-Syntax in die alten übersetzt, so dass, dass der aktuellen Browser alle es verstehen kann) genannt. Es führte diese neue, objektorientierte Art ein, Javascript mit Klassen zu schreiben.

Die Benennung in React ist ziemlich verwirrend, wenn mit dem Übergang zur neuen JS-Syntax begonnen wird, weil die alte Syntax mit createClass eigentlich nicht Teil der neuen objektorientierten Syntax mit Klassen, Methoden und so ist. This article stellt die Unterschiede zwischen den beiden Syntaxstilen, nach denen Sie in Ihrer Frage gefragt haben, gut dar.

---

Als zusätzliche tipp, Sie müssen nicht diese binden an Ihre Funktionen (zB this.renderHeader = this.renderHeader.bind(this); in Ihrem Beispiel, wenn Sie unter Verwendung eines anderen Merkmal ECMAScript 6 Ihre benutzerdefinierten Funktionen definieren arrow functions genannt. Diese löscht sofort zwei weitere Linien Code aus Ihrem Beispiel und die beiden Ansätze erfordern etwa die gleiche Menge an Eingabe.