10 Experten-ReactJS-Tipps, die Sie heute kennen müssen
React hat sich zu einem der beliebtesten Tools in der Bibliothek eines Webentwicklers entwickelt. Wie bei allem müssen Sie jedoch lernen, wie Sie es richtig verwenden, um das Beste aus ihm herauszuholen.
Wenn Sie mit React zu kämpfen haben, haben Sie Glück. Da wir eine Auswahl wesentlicher Techniken zusammengestellt haben, die Ihre Code-Ausgabe verbessern. Lesen Sie weiter, um herauszufinden, wie Sie das Framework optimal nutzen können. Möchten Sie eine Site ohne Code erstellen? Benutze einen Webseitenersteller . Und wenn Sie sich Sorgen machen, die Bedürfnisse Ihrer Website aufrechtzuerhalten, ein anständiger Web-Hosting Service kann Sie unterstützen.
01. Komponenten höherer Ordnung
Komponenten teilen häufig Funktionen miteinander, z. B. Protokollierung oder Netzwerkanforderungen. Diese können schwierig zu pflegen sein, wenn die Anzahl unter Verwendung dieser Logik zunimmt. Entwickler werden aufgefordert, gemeinsam genutzten Code zu abstrahieren und gegebenenfalls einzuschließen.
In einer regulären JavaScript-Anwendung ist das Konzept eines Auftrag von oben Funktion ist eine Möglichkeit, sich dem anzunähern. Kurz gesagt, es handelt sich um Funktionen, die andere Funktionen als Argumente verwenden und ihnen Verhalten verleihen. Array-Methoden wie Karte und Filter sind Beispiele dafür.
Komponenten höherer Ordnung (HOCs) sind der Weg von React, um dasselbe zu erreichen. Sie sind Komponenten, die einer übergebenen Komponente Verhalten verleihen.
const Logger = WrappedComponent => ( class Logger extends Component { componentDidMount() { console.log(‘mounted’); } render() { return } } ); export default Logger(MyComponent);In diesem Beispiel gibt die Funktion hier eine neue verpackte Komponente zurück, die die ursprüngliche Komponente rendert, die zusammen mit allen Requisiten übergeben wurde. HOCs sind reguläre Komponenten und können alles tun, was sie können, z. B. ihre eigenen Requisiten abgeben und sich an Rückrufe im Lebenszyklus anschließen. Die Funktion verpackt dann das Original beim Export. Durch die Verwendung von HOCs werden häufig verwendete Codestücke einfacher zu warten und zu testen. Wenn bestimmte Funktionen erforderlich sind, können sie leicht abgerufen werden, da Sie sicher sind, dass sie sich wie erwartet verhalten.
02. Container- und Präsentationskomponenten
Es ist immer wichtig, bei der Entwicklung verschiedener Teile einer Anwendung die Bedenken zu trennen. Halten Sie die Methoden zum Abrufen von Daten nach Möglichkeit von der Anzeige fern. In React wird ein ähnliches Konzept für Container- und Präsentationskomponenten verwendet.
class ProductsContainer extends Component { [...] componentDidMount() { fetchProducts() .then(products => this.setState({products})); } render() { return ; } }Hier werden Produkte durch eine externe Methode im Container abgerufen, in einem eigenen Geschäft aufbewahrt und dann als Requisiten an die Präsentationskomponente übergeben Produkte das zeigt sie an.
Die Containerkomponente kann die Informationen nicht anzeigen, sondern nur abrufen und anpassen. Ebenso weiß die Präsentationskomponente nicht, woher die Daten stammen. Die Funktionalität einer Komponente kann sich ändern, ohne die andere zu beeinflussen.
Möglicherweise gibt es einen anderen Abschnitt einer Anwendung - oder eine separate Anwendung -, der dieselbe Präsentationskomponente verwenden kann. Da es nur mit Requisiten funktioniert, muss jeder Teil der Anwendung nur einen eigenen Container um ihn herum erstellen.
Dieser Ansatz erleichtert auch den Unit-Test. Die Containertests müssen sich nur um den eingestellten Status kümmern, während der Präsentationskomponente statische Requisiten übergeben werden können, um ein vorhersehbares Ergebnis zu erzielen.
03. Fehlergrenzen
Unabhängig davon, wie gut ein Projekt zusammengestellt ist, werden Fehler dennoch einen Weg finden. Diese können unter ganz bestimmten Umständen auftreten, schwer zu diagnostizieren sein und die Anwendung in einem instabilen Zustand belassen - ein absoluter Albtraum für Benutzer und Entwickler.
React v16 wurde bereits im September 2017 veröffentlicht. Im Rahmen dieses Updates würden nicht behandelte Fehler nun die gesamte Anwendung aushängen. Um dem entgegenzuwirken, wurde das Konzept der Fehlergrenzen eingeführt. Wenn ein Fehler innerhalb einer Komponente auftritt, sprudelt er durch die übergeordneten Komponenten, bis er entweder das Stammverzeichnis der Anwendung erreicht, in der die Bereitstellung aufgehoben wird, oder eine Komponente findet, die den Fehler behandelt. Die Idee der Fehlergrenze ist eine generische Komponente, die sich um die Fehler ihrer Kinder kümmert.
componentDidCatch(error, info) { this.setState({ error: error.message }); } render() { return this.state.error ? : this.props.children; }Durch das Einbinden in eine neue Lebenszyklusmethode kann der Fehler im Status gespeichert und der untergeordnete Inhalt ersetzt werden. Dadurch wird dieser Zweig der Anwendung effektiv vom Rest abgegrenzt.
Die Grenzen funktionieren wie Try / Catch-Blöcke. Sie können problemlos ineinander verschachtelt werden, aber alle Fehler, die in ihnen auftreten, werden von der nächsten Grenze erfasst. Am besten halten sie sich so einfach wie möglich.
04. Portale
Es gibt Zeiten, in denen eine Komponente aus ihrem übergeordneten Element ausbrechen muss, um sich an einer anderen Stelle im DOM zu befinden. Modale Fenster gehören beispielsweise in die oberste Ebene der Seite, um Probleme mit dem Z-Index und der Positionierung zu vermeiden.
Portale sind auch Teil von Version 16, wodurch React Komponenten in DOM-Knoten rendern kann, die vollständig vom Rest der Anwendung getrennt sind. Der Inhalt behält seinen Platz in der Struktur von React, wird aber an anderer Stelle gerendert. Dies bedeutet, dass jedes Ereignis, das innerhalb des Portals ausgelöst wird, über das übergeordnete Element in React und nicht über das Portalcontainerelement selbst in die Luft sprudelt.
ReactDOM.createPortal( this.props.children, document.getElementById(‘modal’), );Durch Erstellen einer dedizierten Komponente kann das Portal von der Renderfunktion zurückgegeben werden. Wenn Inhalte angezeigt werden müssen, können sie in diese Komponente eingeschlossen und dann im anderen Element angezeigt werden.
05. CSS mit gestalteten Komponenten
Das Stylen einer Anwendung mit wiederverwendbaren Komponenten kann zu Problemen mit zusammenstoßenden Klassennamen führen. Konventionen wie BEM helfen, das Problem zu lindern, zielen jedoch darauf ab, die Symptome und nicht das Problem zu behandeln.
Es ist für Komponenten möglich, ihre eigenen Stile zu übernehmen. Dies bedeutet, dass sie die Möglichkeit haben, die Grafik im laufenden Betrieb anzupassen, ohne dass Inline-Stile oder Klassenumschaltungen erforderlich sind. Eine solche Lösung ist gestylte Komponenten , die JavaScript zu ihrem Vorteil nutzt.
Wie der Name schon sagt, werden anstelle von classNames völlig neue, fertig gestaltete Komponenten erstellt. Das System verwendet mit ES2015 gekennzeichnete Vorlagenliterale, die reguläres CSS akzeptieren und auf das angeforderte Element anwenden können.
const Button = styled.button` font-size: 2rem; background: ${props => props.primary ? ‘#3CB4CB’ : ‘white’}; `;Durch die Verwendung eines Platzhalters kann der Stil dynamisch geändert werden. In diesem Beispiel ändert sich der Hintergrund der Schaltfläche, je nachdem, ob die Schaltfläche übergeben wird. A. primär Stütze. Jeder Ausdruck kann hier verwendet werden, um den erforderlichen Stil zu berechnen.
Die erstellte Komponente kann wie jede andere verwendet werden und alle Requisiten werden durchlaufen. Benutzerdefinierte Komponenten können auf dieselbe Weise auch mithilfe von gestaltet werden gestylt (ComponentName) stattdessen.
06. Reaktives Flusen verwenden
Eine der besten Möglichkeiten, den Code sauber zu halten, ist die Verwendung eines Linter-Tools. Sie definieren eine Reihe von Regeln, denen der Code folgen soll, und markieren sie überall dort, wo sie fehlschlagen. Indem sichergestellt wird, dass der gesamte Code diese Regeln erfüllt, bevor er in die Codebasis eingefügt wird, bleiben Projekte wartbar und die Codequalität steigt.
ESLint ist ein beliebter Linter für verschiedene JavaScript-Projekte. Es sind Plugins verfügbar, die bestimmte Codestile analysieren. Eine der häufigsten für
React ist ein npm-Paket namens eslint-plugin-reagieren .
Standardmäßig werden eine Reihe von Best Practices überprüft, wobei Regeln Dinge von Schlüsseln in Iteratoren bis zu einem vollständigen Satz von Requisitentypen überprüfen. Weitere Optionen können pro Projekt aktiviert werden, indem die .eslintrc-Konfigurationsdatei aktualisiert wird.
Ein weiteres beliebtes Plugin ist eslint-plugin-jsx-a11y Dies hilft bei der Behebung häufiger Probleme mit der Barrierefreiheit. Da JSX eine etwas andere Syntax als normales HTML bietet, treten Probleme mit auf alles Text und Tabindex wird beispielsweise nicht von normalen Plugins erfasst. Außerdem werden reaktionsspezifische Probleme wie das Zuweisen aufgegriffen Luft Requisiten mit unterschiedlicher Syntax.
07. Schnappschuss-Test mit Jest
Eine vollständige Testabdeckung hat zwar offensichtliche Vorteile, ist jedoch mit Kosten verbunden. Wenn Sie viele kleine Komponenten schreiben, kann der Code länger dauern als die Komponente selbst. Meistens muss nur überprüft werden, ob sich nichts geändert hat.
Jest ist ein von Facebook erstelltes Testframework. Eine seiner einzigartigen Funktionen ermöglicht es Entwicklern, die Ansicht einer Komponente zu einem bestimmten Zeitpunkt zu erfassen und sie mit zukünftigen Änderungen zu vergleichen. Die beabsichtigten oder nicht beabsichtigten Änderungen werden entweder zur Annahme oder zur Ablehnung markiert. Tests werden schnell, vorhersehbar und einfach zu debuggen, wenn leicht zu erkennen ist, was sich geändert hat.
test('Button renders', () => { const button = renderer .create(Button) .toJSON(); expect(button).toMatchSnapshot(); });Wenn der Test zum ersten Mal ausgeführt wird, konvertiert Jest die Ansicht in JSON und speichert sie in einem speziellen Verzeichnis, das für die Quellcodeverwaltung festgeschrieben werden kann. Bei der nächsten Ausführung wird die Datei überprüft und es werden alle Unterschiede angezeigt. Wenn diese Änderung absichtlich vorgenommen wurde, wird der Schnappschuss ersetzt und der Test besteht. Erfahren Sie mehr über Jest- und Snapshot-Tests .
08. Code-Aufteilung
Wie bei jeder Einzelseitenanwendung wird alles in einer Datei gebündelt, deren Größe schnell ansteigen kann, wenn sie nicht in Schach gehalten wird. Tools wie Webpack können dabei helfen, dieses Bundle in besser verwaltbare Blöcke aufzuteilen, die dann bei Bedarf angefordert werden können.
Da React die Erstellung vieler kleinerer Komponenten fördert, gibt es viele Möglichkeiten, das Bundle aufzubrechen. Das reaktionsladbar Mit package kann eine Komponente genau definieren, was sie rendern muss, und Webpack kann das Bundle automatisch aufteilen, um dies zu berücksichtigen.
const LoadableButton = Loadable({ loader: () => import(‘./Button’), loading: () => Loading... , });Loadable ist ein HOC, das dynamisch alles importiert, was die Komponente benötigt. Es sind einige Einstellungen erforderlich, z. B. was angezeigt werden soll, während alles geladen wird, wodurch es in hohem Maße anpassbar ist. LoadableButton kann dann ohne Probleme als reguläre Komponente verwendet werden.
Bei größeren Anwendungen mit Routing kann es vorteilhafter sein, nach Routen anstatt nach Komponenten aufzuteilen. Gemeinsame Pfade können mit einer Anfrage abgerufen werden und helfen, die Dinge zu beschleunigen. Es ist wichtig, ein Gleichgewicht zwischen der Anzahl der Bundles und ihrer Gesamtgröße zu haben, das sich je nach den Anforderungen der Anwendung ändert.
Weitere Details zu reaktionsladbar kann gefunden werden Hier .
09. Server-Rendering
Bei großen Anwendungen können Benutzer auf einen leeren Bildschirm schauen, während die Site geladen wird. Idealerweise sollte dieser so klein wie möglich sein. Durch das Rendern der ersten Ansicht auf dem Server kann die wahrgenommene Ladezeit reduziert werden, was den zusätzlichen Vorteil bietet, dass Crawler Inhalte einfacher analysieren können.
React ist bereits für das Rendern auf Knotenservern ausgestattet. Es ist eine spezielle Version des DOM-Renderers verfügbar, die dem gleichen Muster wie auf der Clientseite folgt.
import ReactServer from 'react-dom/server'; import App from './App'; [...] ReactServer.renderToString();Diese Methode gibt den regulären HTML-Code als Zeichenfolge aus, die dann als Teil der Serverantwort in einen Seitenkörper eingefügt werden kann. Auf der Clientseite erkennt React den vorgerenderten Inhalt und setzt ihn nahtlos dort fort, wo er aufgehört hat.
Das Rendern von Servern in Anwendungen, die Codeaufteilung, Routing oder Statuscontainer verwenden, kann komplizierter werden, ist jedoch weiterhin möglich. Redux erstellt beispielsweise ein vorinstalliertes Statusobjekt auf dem Server, das die Clientseite beim Erstellen des Speichers hydratisieren kann.
10. Internationalisierung
Für globale Websites ist die Internationalisierung (i18n) von entscheidender Bedeutung, um das lokale Publikum anzusprechen. Für clientseitige Bibliotheken wie React bestand die einzige Option darin, langsame, sperrige Bibliotheken für Dinge wie Übersetzung und Zahlenformatierung bereitzustellen. In jüngerer Zeit wurde die native Intl-API in Browsern verfügbar gemacht, um die hohen Downloadkosten zu vermeiden.
Eine Bibliothek des Yahoo-Teams namens React Intl hilft dabei, diese neue API in React-Projekte zu integrieren. Ein spezieller Satz von Komponenten übersetzt automatisch Zeichenfolgen und formatiert Zahlen, Datumsangaben und Währungen. Es ist Teil seiner Sammlung von i18n-Tools namens FormatJS.
Jede Komponente verwendet Requisiten, die die für die Intl-API verfügbaren Einstellungen widerspiegeln. Durch Angabe des erforderlichen Datumsformats kann die API das, was sie über das Gebietsschema des Browsers weiß, zum Berechnen einer Zeichenfolge verwenden. Jedes Mal, wenn sich eine dieser Requisiten ändert, wird die Zeichenfolge automatisch aktualisiert.
Für String-Übersetzungen muss dem eine entsprechende Übersetzung hinzugefügt werden Mitteilungen Requisite an den Anbieter im Stammverzeichnis der Anwendung, der jedoch in der gesamten Anwendung verwendet werden kann. Die Bibliothek erkennt die ID und ersetzt den Inhalt nach Bedarf. Details zu allen Optionen dieser Funktion finden Sie hier Hier . Wenn Sie Tests Ihrer Webseiten speichern möchten, sollten Sie sie als PDF-Dateien exportieren und gemeinsam nutzen Cloud-Speicher .
Dieser Artikel wurde ursprünglich in einer Ausgabe von 2018 von veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Abonnieren Sie hier .
Zum Thema passende Artikel:
