Was genau ist der Vorteil der Verwendung StyleSheet.create()
gegenüber einem einfachen Objekt?
const styles = StyleSheet.create({
container: {
flex: 1
}
}
Vs.
const styles = {
container: {
flex: 1
}
}
react-native
Corasan
quelle
quelle
Antworten:
Zitieren direkt aus dem Kommentarbereich von StyleSheet.js von React native
Außerdem überprüft StyleSheet auch den Inhalt Ihres Stylesheets. Daher wird jeder Fehler einer falschen Stileigenschaft zum Zeitpunkt der Kompilierung und nicht zur Laufzeit angezeigt, wenn StyleSheet tatsächlich implementiert ist.
quelle
StyleSheet.create({styles...})
besser / schneller ist als{styles...}
. Der Code ist genauso sauber und Sie verwenden auch Namensgebung anstelle von Inlining. Kann jemand etwas Licht ins Dunkel bringen?StyleSheet
bietet Validierung bei der ZusammenstellungStyleSheet.create
und einem einfachen Objekt, nicht inline gegen eine Konstante außerhalb der KlasseEs gibt keinen Vorteil. Zeitraum.
Mythos 1:
StyleSheet
ist performanterEs gibt absolut keinen Leistungsunterschied zwischen
StyleSheet
und einem Objekt, das außerhalb von deklariert wurderender
(es wäre anders, wenn Sierender
jedes Mal ein neues Objekt innerhalb von erstellen würden ). Der Leistungsunterschied ist ein Mythos.Der Ursprung des Mythos liegt wahrscheinlich darin, dass das Team von React Native dies versucht hat, aber sie waren nicht erfolgreich. Nirgendwo in den offiziellen Dokumenten finden Sie Informationen zur Leistung: https://facebook.github.io/react-native/docs/stylesheet.html , während der Quellcode "noch nicht implementiert" lautet: https://github.com/ facebook / react-native / blob / master / Libraries / StyleSheet / StyleSheet.js # L207
Mythos 2:
StyleSheet
Überprüft das Stilobjekt zur KompilierungszeitDas ist nicht wahr. Normales JavaScript kann Objekte zur Kompilierungszeit nicht validieren.
Zwei Dinge:
quelle
StyleSheet.create( {x:{flex: "1"}} )
wird zur Laufzeit fehlschlagen, ebenso wie eine Typoskript Prüfung auf diesem zum Zeitpunkt der Kompilierung.Die akzeptierte Antwort ist keine Antwort auf die OP-Frage.
Die Frage ist nicht der Unterschied zwischen Inline-Stilen und einem
const
außerhalb der Klasse, sondern warum wirStyleSheet.create
anstelle eines einfachen Objekts verwenden sollten.Nach ein wenig Recherche habe ich Folgendes gefunden (bitte aktualisieren, wenn Sie Informationen haben). Die Vorteile von
StyleSheet.create
sollten folgende sein:quelle
Es verwendet , um in Betracht gezogen werden , dass ein Stylesheet mit war mehr performant und wurde empfohlen , von der RN Team aus diesem Grund bis Version 0.57, aber es ist jetzt nicht mehr zu empfehlen , da richtig in darauf hingewiesen , eine andere Antwort auf diese Frage.
In der RN-Dokumentation wird StyleSheet jetzt aus folgenden Gründen empfohlen, obwohl ich denke, dass diese Gründe auch für einfache Objekte gelten würden, die außerhalb der Renderfunktion erstellt wurden:
Was sind meiner Meinung nach die möglichen Vorteile der Verwendung von StyleSheet gegenüber einfachen Objekten?
1) Trotz gegenteiliger Behauptungen meinen Tests auf RN v0.59.10 zeigt an, dass Sie tun einige Validierung erhalten wenn Sie anrufen
StyleSheet.create()
und Typoskript (und wahrscheinlich fließen) wird auch Fehler bei der Kompilierung melden. Selbst ohne Überprüfung der Kompilierungszeit ist es meiner Meinung nach immer noch vorteilhaft, die Laufzeitüberprüfung von Stilen durchzuführen, bevor sie zum Rendern verwendet werden, insbesondere wenn Komponenten, die diese Stile verwenden, unter bestimmten Bedingungen gerendert werden können. Auf diese Weise können solche Fehler erkannt werden, ohne dass alle Rendering-Szenarien getestet werden müssen.2) Da die Stylesheet wird von dem RN - Team empfohlen sie noch Hoffnung , mit Stylesheet kann die Leistung in Zukunft zu verbessern, und sie können andere mögliche Verbesserungen im Geist als auch, zum Beispiel:
3) Die aktuelle
StyleSheet.create()
Laufzeitvalidierung ist nützlich, aber etwas eingeschränkt. Es scheint auf die Typprüfung beschränkt zu sein, die Sie mit Flow oder Typoskript erhalten würden, also wird es sagenflex: "1"
oderborderStyle: "rubbish"
, aber nicht,width: "rubbish"
da dies eine Prozentzeichenfolge sein könnte. Es ist möglich, dass das RN-Team diese Validierung in Zukunft verbessert, indem es beispielsweise Prozentzeichenfolgen oder Bereichsbeschränkungen überprüft, oder Sie könnenStyleSheet.create()
Ihre eigene Funktion einbinden, um diese umfassendere Validierung durchzuführen.4) Durch die Verwendung von StyleSheet erleichtern Sie möglicherweise den Übergang zu Alternativen / Erweiterungen von Drittanbietern wie React-Native-Extended-Stylesheet , die mehr bieten.
quelle
Das Erstellen Ihrer Stile über
StyleSheet.create
wird nur dann überprüft, wenn die globale Variable__DEV__
auf true gesetzt ist (oder wenn Sie in Android- oder IOS-Emulatoren ausgeführt werden, siehe React Native DEV- und PROD-Variablen ).Die Funktion Source - Code ist ziemlich einfach:
Ich würde empfehlen, es zu verwenden, da es während der Entwicklung eine Laufzeitüberprüfung durchführt und das Objekt einfriert.
quelle
Ich habe keine Unterschiede zwischen dem
StyleSheet
einfachen und dem einfachen Objekt gefunden, außer bei der Typüberprüfung in TypeScript.Zum Beispiel dies (beachten Sie die Tippunterschiede):
gleich dem:
quelle