Vor- und Nachteile von react-native Component versus React.createClass zur Implementierung von UI-Komponenten?

8

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

Wird einer veraltet und ich sollte den neueren verwenden, welcher auch immer der ist?

Soll ich Komponenten erstellen oder Klasse reagieren, um meine Benutzeroberfläche zu entwickeln?

Ich sehe einige Beispiele mit Component. Zum Beispiel:

%Vor%

Und andere, die

verwenden %Vor%

Ich lerne reaktiv-nativ am Beispiel und bin verwirrt darüber, was bevorzugt wird.

Ich habe vor kurzem eine React-Klasse in eine Komponente konvertiert und festgestellt, dass der "this" -Zeiger nicht funktioniert, da React-Klassen für die automatische Bindung und Komponenten eine explizite Bindung benötigen.

    
Ed of the Mountain 04.03.2016, 18:41
quelle

3 Antworten

3

Sie sollten Class über createClass vorziehen, weil es wahrscheinlich veraltet ist.

  

Das bemerkenswerteste neue Feature ist die Unterstützung von ES6-Klassen, mit denen Entwickler beim Schreiben von Komponenten flexibler arbeiten können. 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.

Ссылка

  

Keine automatische Bindung

     

Methoden folgen der gleichen Semantik wie reguläre ES6   Klassen, was bedeutet, dass sie dies nicht automatisch an die   Beispiel. Sie müssen explizit die Funktionen .bind (this) oder arrow verwenden   = & gt;.

     

Keine Mixins

     

Leider ist ES6 ohne jegliche Unterstützung gestartet worden.   Daher wird Mixinds nicht unterstützt, wenn Sie React with ES6 verwenden   Klassen. Stattdessen arbeiten wir daran, es einfacher zu machen, dies zu unterstützen   Anwendungsfälle ohne auf Mixins zurückgreifen zu müssen.

Ссылка

    
Nicolas Charpentier 04.03.2016, 19:29
quelle
2

Sofern Sie keine Mixins verwenden, verwenden Sie immer die Klasse (lesen Sie ES6) anstelle von React.createClass. Der Großteil des reaktiven nativen Codes befindet sich in ES6, daher hilft es, mit den aktuellen Standards auf dem neuesten Stand zu bleiben.

Es gibt keinen Unterschied in Bezug auf Leistung / Benutzeroberfläche. Klasse (ES6) ist eine bessere Art zu schreiben, reagieren / native / JS Code sowieso. FWIW: Ссылка .

    
nmh 05.03.2016 03:37
quelle
2

Wie ich in Ihrem Kommentar gesehen habe, suchen Sie eine Antwort in einfachen Worten:

Wenn Sie sich das Beispiel ansehen, das Sie in Ihrer Frage angegeben haben, denken Sie vielleicht "Oh mein Gott, warum sollte ich diese ausführlichere Version mit extends Component verwenden, wenn sie im Grunde dasselbe tut wie createClass ?"

Nun, die Syntax mit extends Component ist die moderne Methode zum Schreiben 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 , weil Sie sie verwenden Die createClass Art des Schreibens von Komponenten könnte bald in React Native veraltet sein, wie in den anderen Antworten darauf hingewiesen wird.

Diese moderne Version von Javascript heißt ECMAScript 6 (mit ihrem Compiler namens babel ), der die neue Javascript-Syntax in die alte übersetzt dass die aktuellen Browser es alle verstehen). Es führte diese neue, mehr 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 tatsächlich nicht Teil der neuen objektorientierten Syntax mit Klassen, Methoden und dergleichen ist. In diesem Artikel werden die Unterschiede zwischen den beiden Syntaxstilen, nach denen Sie in Ihrem Blog gefragt haben, gut dargestellt Frage.

Als zusätzlichen Tipp müssen Sie das nicht an Ihre Funktionen binden (zB this.renderHeader = this.renderHeader.bind(this); in Ihrem Beispiel, wenn Sie Ihre benutzerdefinierten Funktionen definieren, indem Sie eine andere Funktion von ECMAScript 6 namens arrow-Funktionen Dies löscht sofort zwei weitere Codezeilen aus Ihrem Beispiel und die beiden Ansätze erfordern grob die gleiche Menge an Tippen.

    
Andru 05.03.2016 10:07
quelle

Tags und Links