Welche ReactJS-Syntax zu verwenden ist; React.createClass oder ES6 erweitert?
Ich bin Anfänger von ReactJS. Ich habe viele Dokumente und E-Books auf verschiedenen Websites gelernt und studiert. Mir ist klar, dass es zwei Syntaxen für ReactJS gibt. Beispiel:
%Vor%Und diese Version wurde von ES6 geschrieben:
%Vor%Was ist der beste Weg, ReactJS zu verwenden? Aber ich fand diese Bibliotheken, Anwendung auf GitHub verwendet, um viel ES6 durchzuführen.
3 Antworten
Der zweite Ansatz ist wahrscheinlich der richtige, den wir in Zukunft annehmen werden, da Facebook gesagt hat, dass sie den Ansatz von React.createClass letztendlich ablehnen werden.
Aus den Versionshinweisen zu React v0.13 :
Unser 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 Klasseneigenschaftsinitialisierungen in der Sprache haben, planen wir nicht, React.createClass
Ich persönlich denke, dass der zweite Ansatz auch das Lesen von Code erleichtert, aber das ist offensichtlich ein subjektiverer Grund.
Wie oben erwähnt, ist es jedoch wichtig zu beachten, dass das ES6-Format Mixins nicht unterstützt. Wenn Sie also ein Mixin benötigen, müssen Sie das createClass-Format für diese Komponente verwenden.
Dieser Beitrag "React.createClass versus extends React.Component" von Todd Motto hat etwas Gutes Information über den Unterschied zwischen den beiden Syntaxen. Es lohnt sich, das zu lesen, um zu erfahren, wie sich das Schlüsselwort this zwischen den beiden Syntaxen verhält.
Edit: Dan Carageas Post unten macht einige hervorragende Punkte, die unbedingt berücksichtigt werden sollten.
Eine dritte Alternative ...
Es gibt auch eine dritte Möglichkeit, eine React-Komponente zu definieren, die als zustandslose Funktionen bezeichnet wird. in der React-Dokumentation und oft als "zustandslose funktionale Komponenten" oder "funktionale zustandslose Komponenten" bezeichnet. Dies ist das Beispiel aus der Dokumentation:
%Vor%
Das Definieren der Komponente als Funktion bedeutet, dass sie effektiv jedes Mal neu erstellt wird und somit keinen fortlaufenden internen Zustand hat. Dies macht es einfacher, die Komponente zu analysieren und zu prüfen, da das Verhalten der Komponente für eine gegebene Menge von Eigenschaften (Requisiten) immer identisch ist, anstatt aufgrund der Werte des internen Zustands von Lauf zu Lauf zu variieren.
Dieser Ansatz funktioniert besonders gut, wenn Sie einen separaten State-Management-Ansatz wie Redux verwenden und sicherstellen, dass die Zeitreihe von Redux konsistente Ergebnisse liefert. Funktionale zustandslose Komponenten machen auch das Implementieren von Features wie Rückgängig / Wiederholen einfacher.
Ich habe React.createClass für Arbeit und ES6-Klassen für mein Haustier-Projekt gemacht. Ich finde das Letztere auch leichter zu lesen, aber ich vermisse oft die Einfachheit / Seelenfrieden, die ich mit dem ersten habe.
Bei dem klassenbasierten Ansatz beachten Sie, dass die statisch definierten propTypes und defaultProps aus technischer Sicht ES7 und nicht ES6 sind. Dies kann sich ändern, bis ES7 abgeschlossen ist.
Ein reiner ES6-Ansatz wäre, propTypes / defaultProps wie
Sie müssen auch daran denken, onClick in render zu binden (oder eine andere Methode, bei der Sie this verwenden müssen). Es ist fast sicher, dass Sie an einigen Orten vergessen werden. Während mit createClass alle Aufrufe automatisch von React gebunden sind.
Ein weiterer ES7-Vorschlag könnte die Dinge vereinfachen, aber Sie müssen immer daran denken, es überall zu schreiben:
<div onClick={::this.tick}> , die this an tick bindet.
Natürlich müssen Sie sich in babel config für Stufe 0 anmelden, um alle diese ES7-Vorschläge zu nutzen.
Über Mixins ... Es gibt akzeptable Wege, Mixins mit Klassen zu verwenden. Ein brillanter Ansatz ist mixWith.js , aber Sie könnten auch ES7-Dekoratoren, HOCs, sogar Object.assign() :)
Am Ende des Tages glaube ich, dass der Klassenansatz nichts von echtem Wert bringt, und du könntest den alten und gepflasterten Weg von createClass gehen, bis du ein gutes Verständnis von React hast. Dann können Sie mit Klassen und ES6 / 7/100 herumspielen. Es wird eine Weile dauern, bis sie createClass ablehnen.
Ich habe mit dem Staging-Stil von React ES6 + begonnen und es klingt gut, wenn Sie in React sagen, dass alles eine Komponente ist. Ich mag diese class Organisation.
Da nur Methoden innerhalb von ES6 class definiert werden können, wenn Sie Eigenschaften in reinem ES6 definieren möchten, müssen sie außerhalb der Klasse liegen. Wie zum Beispiel hier:
Dies ist der Grund, warum der Abschnitt co_de% in ES6 außerhalb der Klassendefinition liegt.
Aber wenn Sie ES7 verwenden, können Sie innerhalb von propTypes problemlos statische und nicht statische Eigenschaften definieren.
Mit ES7 können Sie implizite verbindliche Tipps für Methoden verwenden, wie auch in hier demonstriert:
%Vor%Der alte Pre React v0.13 Style oder ES5 Style war so.
In class sind alle Methoden automatisch gebunden.
Dies kann für JavaScript-Entwickler etwas verwirrend sein, da dies kein natives JavaScript-Verhalten ist.
Das ist whe schreiben:
%Vor%oder verwenden Sie einige Tricks, um dasselbe mithilfe der Syntax der Eigenschaftsinitialisierung zu erreichen.
%Vor%Schließen
Für die Neuankömmlinge halte ich den neuesten Stil für eine bessere Wahl.
Über Mixins
Wie bereits erwähnt hier :
ES6 wurde ohne jegliche Mix-Unterstützung gestartet. Daher wird keine Unterstützung für Mixins angeboten, wenn Sie React mit ES6-Klassen verwenden. Wir fanden auch zahlreiche Probleme in Codebasen, die Mixins verwenden, und raten davon ab, sie im neuen Code zu verwenden. Dieser Abschnitt existiert nur für die Referenz.
Tags und Links syntax reactjs react-jsx ecmascript-6