So gehen Sie mit häufig auftretenden React JS-Problemen um - Umsetzbare Tipps

Einführung

Seit seiner Veröffentlichung im Jahr 2013 hat sich React JS zusammen mit einigen seiner Bibliotheken zu einem soliden und stabilen JavaScript-Framework entwickelt.

Wie die Statistiken nahelegen, wird React aufgrund seiner Benutzerfreundlichkeit und logischen Aufteilung in Komponenten häufig von Frontend-Entwicklern und technischen Führungskräften bevorzugt.

Obwohl React beim Erstellen komplexer Frontend-Anwendungen einfach zu verwenden ist, ist diese Leichtigkeit mit Kosten verbunden, wenn das Frontend unachtsam geschrieben wird.

In diesem Artikel konzentrieren wir uns auf den Umgang mit gängigem React JS Probleme, mit denen Technologieführer konfrontiert werden, wie zum Beispiel:

• große Datenlisten,
• nutzlose Renderings,
• Suchmaschinenoptimierung (SEO),
• Zerlegung der logischen und UI-Ebenen,
• potenzielle Sicherheitslücken.

React JS-Probleme mit der Leistung

React selbst rühmt sich seiner hohen Leistung, was wahr ist, aber es gibt Fälle, in denen sorgfältige Maßnahmen ergriffen werden müssen.

Das Konzept des virtuellen DOM

Bevor wir mit der Diskussion beginnen, wie mit React-Leistungsproblemen umgegangen werden kann, müssen wir zunächst verstehen, wie die React-Benutzeroberfläche gerendert wird.

Die Schlüsselkonzepte hier sind DOM und virtuelles DOM.

“DOM“ steht für Document Object Model, das die Struktur einer Webseite ist, die aus einem Baum von Objekten besteht. Für Laien bedeutet das die HTML-Elemente der Webseite.

“Virtuelles DOM“ ist die Darstellung des DOM, das im Speicher aufbewahrt und mit dem echten DOM synchronisiert wird, wenn es aktualisiert werden muss. Dank dieses Ansatzes sind Entwickler in der Lage, die Attributmanipulation, die Ereignisbehandlung und die manuelle DOM-Aktualisierung zu abstrahieren.

Das Bild zeigt, dass das virtuelle DOM (im Speicher gehalten) die Differenz berechnet, wenn eine Zustandsänderung auftritt, und erst dann wird sie auf das reale DOM angewendet.

Lange Artikellisten

Ein häufiges sich wiederholendes Leistungsproblem in React JS ist eine komplexe und lange Liste von Elementen.

Angenommen, die App muss viele Karten (in einigen Fällen sogar Hunderte) rendern, die aus Bildern (oder noch besser — Karussells mit Bildern), Titeln, Links und Bewertungen bestehen und responsiv sein müssen.

Die Verlangsamung bei Laptops und Mobilgeräten mit niedrigen Spezifikationen kann sehr schnell bemerkt werden.

Dies liegt daran, dass React jede Änderung in jedem Element der Liste beobachten muss. Dieser Prozess verbraucht viele Ressourcen.

Zum Glück ist es nicht so schwer zu beheben — virtualisierte Listen komm zur Rettung.

<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Eine lange Liste von Elementen kann zu einer schlechten Leistung auf Geräten mit niedrigen Spezifikationen führen. Verwenden Sie Virtualisierung, um das Problem zu vermeiden</p></span>.

Eine virtualisierte Liste ist eine Liste, die nur den Inhalt auf dem Bildschirm sichtbar macht und alle anderen Elemente ausblendet, bis der Benutzer entscheidet, nach unten oder oben zu scrollen, um sie zu sehen, wodurch viele wertvolle Ressourcen eingespart werden.

Die beliebteste Bibliothek für die Listenvirtualisierung ist React-Fenster.

Wie in der obigen Grafik zu sehen ist, werden nur die Elemente gerendert, die derzeit auf dem Bildschirm angezeigt werden können. Der Rest ist ausgeblendet.

Verschwendete Renderings — zu viele Renderings

Verschwendete Renderings sind eines der häufigsten Probleme mit React JS.

Was verursacht sie?

Um das zu verstehen, müssen wir zunächst verstehen, wie Daten in React weitergegeben werden.

Es gibt viele Möglichkeiten, aber eine der einfachsten sind „Requisiten“ (Daten, die direkt an die Komponente weitergegeben werden).

Angenommen, es gibt ein Element wie „Artikel“, das ein einzelnes Element auf der Liste darstellen kann. Wenn es eine Liste mit zwei Elementen gibt und Entwickler einen Wert, der in der Liste berechnet wird, an jede der Karten weitergeben möchten, können sie das wie folgt tun:

Das Problem dabei ist, dass jedes Mal, wenn „getNewValue“ aufgerufen wird, jedes Element der Liste wird neu gerendert, was eine Verschwendung von Ressourcen ist, da der Wert immer derselbe ist.

Dieses Beispiel hier ist ein Dummy-Beispiel, damit das Beispiel nicht zu kompliziert aussieht.

Im echten Leben könnten Entwickler damit umgehen, dass komplexe Datenstrukturen neu gerendert werden, was die Leistung sichtbar verlangsamt, z. B. Nachrichten in einem Gruppenchat — eine große Sammlung von Elementen, die Text, Bilder und Zitate anderer Nachrichten enthalten.

Bemerken Endbenutzer „verschwendete Renderings“ oder ist es vielleicht einfach ein Fehler für Entwickler?

Die Antwort lautet: Das ist oft ein Problem für den Endverbraucher ebenso.

Der Endbenutzer wird Folgendes bemerken:

• eine Verschwendung von CPU, da die Verarbeitungseinheit dieselben Werte neu berechnen muss, was zu einer schnelleren Batterieentladung führt,
• Verlangsamen Sie die Anwendung, wenn das erneute Rendern häufig erfolgt (Dutzende Male pro Minute) und wiederholbare umfangreiche Berechnungen erfordern — was von Benutzern oft als „App-Lagging“ wahrgenommen wird.

Ein Tool, das die manuelle Überprüfung jedes erneuten Renderns erheblich erleichtert, ist“Warum hast du gerendert?“.

Wie können Entwickler es verwenden?

Indem Sie es in der App-Initialisierung starten und den Komponenten, die sie verfolgen möchten, eine WhyDidYouRender-Statik hinzufügen, einfach so:

Klasse BigListPureComponent erweitert React.PureComponent {
static whyDidYouRender = true
//viel Logik und Handler
rendern () {
zurückkehren (
//eine Liste von 1000000000000 Einträgen
)
}
}

Wenn etwas schief geht, erscheint eine Benachrichtigung in der Konsole:

Die Lösung dafür ist einfach zu implementieren, aber man muss vorsichtig sein, um Wiederholungen nicht zu eliminieren, wenn sie wirklich passieren müssen.

Entwickler können „PureComponent“ verwenden, das einen oberflächlichen Vergleich der an eine Komponente übergebenen Argumente mit den vorherigen Werten durchführt und dann entscheidet, ob die Komponente neu gerendert werden muss.

Sehr oft reicht dies jedoch nicht aus und Entwickler müssen den Komponenten manuell mitteilen, ob sie neu gerendert werden müssen, indem sie benutzerdefinierte Vergleichsfunktionen bereitstellen.

Wenn die Komponenten so angeordnet sind, dass beobachtbare Daten ganz oben in der Hierarchiekomponente des Bildschirms stehen, kann diese Vorgehensweise versehentlich dazu führen, dass ein erneutes Rendern verschwendet wird. Dies geschieht jedes Mal, wenn ein Zeichen zu dem Eingabefeld hinzugefügt oder gelöscht wird, das sich auf dem Bildschirm befindet und mit einem Datenanbieter wie Redux verbunden ist.

PureComponent oder die neue Funktion von“ von ReactReact.memo“ ermöglicht es Entwicklern, solche Situationen zu verhindern.

<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Um die Leistung der App zu verbessern und unnötige erneute Renderings zu vermeiden, verwenden Sie ein Erkennungstool namens“Warum hast du gerendert?“ und implementieren Sie die notwendigen Korrekturen. Probieren Sie „PureComponent“ aus, ein Tool, das feststellt, ob die Komponente neu gerendert werden muss, und es entweder passieren lässt oder stoppt</p></span>.

Am Ende des Tages löst React nur die UI-Probleme

Teams sollten eines beachten: React allein ist nur eine UI-Bibliothek, die selten genug ist und niemals ausreichend ist, wenn die Anwendung komplex wird.

Komplexe Projekte brauche oft ein Toolkit das könnte die Logik der App handhaben und den aktuellen Status effektiv verwalten. Die alleinige Verwendung von React JS für diesen Zweck führt nur zu einer aufgeblähten Codebasis, die schwer zu verwalten sein wird. In solchen Fällen könnten sich Bibliotheken wie Redux oder MobX als nützlich erweisen.

Hohe Ladezeiten in komplexen React-Anwendungen

Bevor Sie erwägen, React für das Projekt auszuwählen, sollten Sie Folgendes wissen Hinzufügen von React oben Eine bestehende Anwendung wird es nicht schneller oder leichter machen. Es ist genau das Gegenteil.

Die erwarteten Ergebnisse können jedoch erzielt werden, indem ein Teil der Frontend-Codebasis durch React ersetzt wird.

Codeaufteilung

React-Apps können schnell sein, wenn sie durchdacht gestaltet sind. Manchmal reichen gute Absichten jedoch nicht aus und die App wird langsam.

Normalerweise erreicht das JavaScript-Paket einen Punkt, an dem es schwer wird und es länger dauert, bis es korrekt heruntergeladen und analysiert wird.

Dies ist jedoch selten der Fall, der gesamte JavaScript-Code muss auf einer einzigen Seite verwendet werden, im Gegenteil, normalerweise reicht ein kleiner Teil aus.

Glücklicherweise decken moderne JavaScript-Bundler (wie Webpack oder Parcel) dies ab und ermöglichen es Entwicklern, den Code in mehrere Teile aufzuteilen separate Bündel sodass Seite /a idealerweise den Inhalt lädt, der nur für /a benötigt wird, während Seite /b nur den für Seite /b erforderlichen Inhalt lädt, wodurch die Paketgröße und die Ladezeit drastisch reduziert werden.

<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Wenn Sie die Leistung der Apps verbessern möchten, versuchen Sie, Code-Splitting zu implementieren, bei dem nur die Teile geladen werden, die für die jeweilige Ansicht erforderlich</p></span> sind.

Um ein besseres Beispiel aus der Praxis zu geben: Kannst du dir vorstellen, Facebook im Feedboard zu starten und den gesamten Code zu erhalten, der nicht nur für den Feed, sondern auch für die Verwaltung von Gruppen, das Erstellen neuer Chats oder das Scrollen nach oben erforderlich ist, um alte Nachrichten zu sehen?

Das würde die Größe des Facebook-Webclients drastisch erhöhen, wodurch die App viel langsamer geladen wird.

Ein anderes Beispiel ist Netflix.

Benötigen Sie den Code, um Ihre Lieblingssendungen auf der Anmelde- oder Landingpage zu starten?

Das allererste „Malen“ der Webseite sollte dauern so wenig Zeit wie möglich damit der Nutzer auf der Seite bleibt. Zu diesem Zeitpunkt ist das Herunterladen eines Großteils des gesamten Netflix-Codes ein großes Tabu.

Große Module von Drittanbietern

Bei einigen Projekten stellen Entwickler in der Regel erst spät im Entwicklungsprozess Probleme mit Modulen von Drittanbietern fest, die auf deren Größe zurückzuführen sind.

Warum passiert das?

Es beginnt normalerweise unschuldig. Teams wollen den Erstellungsprozess vereinfachen, fügen hier und da ein Plugin hinzu und es stellt sich schnell heraus, dass die App so viel wiegt, dass Benutzer nicht in angemessener Zeit auf die App zugreifen können.

Dies war ein großes Problem für moment.js, das jetzt offiziell veraltet ist und für keine neue Anwendung geeignet ist und in bestehenden Apps durch ein modernes (leichtes) Modul ersetzt werden sollte.

Wenn Entwickler sich nicht sicher sind, ob ein Drittanbietermodul zu Verlangsamungen in der App führt, sollten sie dies überprüfen. Webpack-Bundle-Analyzer, ein Tool, das visualisiert die Größe der Webpack-Ausgabe Dateien mit einer interaktiven zoombaren Baumkarte.

Dieses Modul hilft:

• schau, was wirklich in dem Bündel ist,
• finde heraus, welche Module den größten Teil seiner Größe ausmachen,
• finde Module, die versehentlich im Paket enthalten waren,
• optimiere die Größe des Pakets.

Gzip-Komprimierung

Einige Teams könnten an der Gzip-Komprimierung interessiert sein. Bei dieser Technik werden Dateien so komprimiert, dass sie weniger wiegen und vom Endbenutzer schneller heruntergeladen werden können. Weiterführende Lektüre hier.

Serverseitiges Rendern

Was die Ladezeit von React-Apps definitiv erhöht, ist ein Prozess namens serverseitiges Rendern (SSR).

JavaScript-Apps sind clientseitige Anwendungen, was bedeutet, dass der gesamte Code zuerst heruntergeladen und analysiert werden muss, dann muss das DOM erstellt werden und erst dann ist er nutzbar.

Der SSR-Ansatz ermöglicht es Entwicklern generiert HTML auf dem Server sodass die erste Anfrage schnell eine sichtbare Website zurückgibt und das JavaScript-Paket sich kurz nach dem Herunterladen selbst „hydratisiert“, was bedeutet, dass das auf dem Server generierte Markup wiederverwendet wird.

Jede serverseitige Sprache kann HTML aus der vorhandenen React-Codebasis generieren, und es gibt Tools, die speziell für diesen Zweck erstellt wurden.

<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: dank serverseitigem Rendern ist die App in der Lage, bei der ersten Anfrage eine sichtbare Website zurückzugeben</p></span>.

Eine der allgemein empfohlenen Lösungen für React-Apps ist Gats von JS.

Gatsby ist ein auf React basierendes Open-Source-Framework zum Erstellen von Websites und Apps. Es wird jedoch nicht sofort funktionieren — es wird höchstwahrscheinlich erforderlich sein, sich über bestimmte Werte lustig zu machen, die stark von der Umgebung des Endbenutzers abhängen, wie zum Beispiel den „Offset des sichtbaren Bereichs“, den Offset, der für virtualisierte Listen verwendet wird.

Beachten Sie, dass die Anwendung für einige Zeit nicht nutzbar sein wird, nachdem der HTML-Code (UI) für den Benutzer sichtbar ist. Normalerweise muss der Benutzer mindestens eine Sekunde warten, bis die Seite interaktiv ist, was in den meisten Fällen kein Hindernis sein sollte.

Probleme bei der Suchmaschinenindizierung

Bei webclientseitigen Anwendungen ist ein Problem aufgetreten. Typische React JS-Apps, bei denen es sich um SPAs (Single Page Applications) handelt, sehen zwar wunderschön aus, funktionieren reibungslos und verhalten sich genauso wie native Apps, sind aber nicht besonders SEO-freundlich.

Das passiert, weil eine Suchmaschine (wie Google oder DuckDuckGo) nur HTML-Tags und einige Skripte sieht, die sie laden soll.

Moderne Suchmaschinen laden den Code und können die Website crawlen, aber es ist immer noch ein langsamer Prozess.

Zum Glück tritt zu diesem Zeitpunkt wieder die oben genannte SSR in Aktion. Wenn Entwickler den HTML-Code auf dem Server vorrendern, hat der Crawling-Bot alles, was er braucht, um die Site ordnungsgemäß zu indizieren.

‍

Willst du SEO-Freundlichkeit? Verwenden Sie React nicht alleine

Wenn im Frontend nur React verwendet wird, sehen Suchmaschinen für alles nur eine Seite — und zwar schlecht für die Suchmaschinenoptimierung.

Wie bereits erwähnt, wird React selbst selten alleine verwendet.

Wenn mehr als nur eine Seite benötigt wird, müssen die Entwickler eine benutzerdefinierte Lösung erstellen oder eine anerkannte und erprobte Lösung verwenden, wie React-Router. Mit diesem Tool können Entwickler separate Seiten erstellen, damit Suchmaschinen sie sehen können.

React-Apps verwenden häufig“React-Helm“, mit dem Entwickler auf einfache Weise SEO-Header wie Seitentitel oder OpenGraph einrichten können. Es unterstützt SSR und ist daher noch einfacher zu bedienen.

Beispiel in einem React-Snippet:

React-UI zerlegen

Was mit React-Komponenten oft passiert, ist, dass sie früher oder später zu großen, fetten Brocken werden, die schwer zu lesen und zu verstehen sind.

In diesem Fall wird immer empfohlen, teile die große Komponente in ein paar kleinere damit sie leichter zu verstehen sind.

Diese Lösung hat einen zusätzlichen Geschäftsvorteil — die kleineren Komponenten können an anderer Stelle wiederverwendet werden.

Eine der empfohlenen Methoden zum Aufteilen von React-Komponenten schlägt vor, sie zu unterteilen in:

• eine Datei, die nur den UI-Teil enthält — den primären Baustein mit so wenig Logik wie möglich,
• eine Containerdatei, die Funktionen, eine Verbindung zu Redux oder anderen Tools zur Verwaltung des Anwendungsstatus enthält,
• eine Datei, die Stile enthält (z. B. gestylte Komponenten).

Auf diese Weise können Entwickler eine Komponente aufteilen in Teile, die an einer Einheit getestet werden können und Lesbarkeit und Komplexität werden erheblich sinken. Außerdem ist es dann einfacher, einen Teil der Logik zu ersetzen, ohne die gesamte Datei nach Verweisen auf den vorherigen Code durchsuchen zu müssen.

Im Allgemeinen sollte vermieden werden, komplexe Logik in React JS-Komponenten beizubehalten.

<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Vermeiden Sie es, komplexe Logik in den Komponenten zu belassen. Es ist besser, eine große Komponente in ein paar kleinere zu unterteilen, die leicht zu lesen und zu testen sind.</p></span>

Entwickler sollten entweder mit einer benutzerdefinierten Lösung kommen oder eine vorhandene Lösung wie Redux-Toolkit oder ReduxSaga verwenden, damit Views nur oder größtenteils Daten ohne oder nur geringe Nebenwirkungen erhalten.

Reagieren Sie auf Sicherheitslücken

Site-übergreifendes Scripting (XSS)

• React-Anwendungen sind anfällig für XSS-Angriffe, wenn benutzergenerierte Inhalte nicht ordnungsgemäß bereinigt werden oder entkommen.
• Verwenden Sie Bibliotheken wie DOMPurify, um Benutzereingaben vor dem Rendern zu bereinigen und so die Ausführung bösartiger Skripts zu verhindern.
• Nutzen Sie die integrierten Funktionen von React wie JSX, um sicherzustellen, dass Benutzereingaben als Daten und nicht als ausführbarer Code behandelt werden.

Schadensbegrenzung

• Desinfizieren Sie Benutzereingaben mithilfe von Bibliotheken wie DOMPurify bevor Sie sie rendern.
• Verwenden Sie die integrierten Funktionen von React wie JSX, um die Skriptinjektion zu verhindern.
• Legen Sie Content Security Policy (CSP) -Header fest, um die Quellen einzuschränken, aus denen Skripts geladen werden können.

Injektionsangriffe

• Die unsachgemäße Verwendung dynamischer Daten in JSX-Ausdrücken kann zu Injektionsanfälligkeiten führen.
• Vermeiden Sie es, Benutzereingaben direkt in JSX-Ausdrücke zu interpolieren; verwenden Sie stattdessen Komponentenrequisiten oder Zustandsvariablen.
• Verwenden Sie Bibliotheken wie serialize-javascript, um Daten für die Einbettung in Skripte sicher zu serialisieren.
  ‍

Schadensbegrenzung

• Vermeiden Sie es, Benutzereingaben direkt in JSX-Ausdrücke zu interpolieren; verwenden Sie Komponentenrequisiten oder Zustandsvariablen.
• Benutzen serialisieren-javascript um Daten für die Einbettung in Skripte sicher zu serialisieren.

Unsichere Abhängigkeiten

• Pakete von Drittanbietern, die in einem React-Projekt verwendet werden, können Sicherheitslücken aufweisen, die ausgenutzt werden können.
• Aktualisieren Sie Abhängigkeiten regelmäßig auf ihre neuesten sicheren Versionen.
• Verwenden Sie Tools wie npm audit oder yarn audit, um Schwachstellen in Abhängigkeiten zu identifizieren und zu beheben.

Schadensbegrenzung

• Aktualisieren Sie Abhängigkeiten regelmäßig auf ihre neuesten sicheren Versionen.
• Verwenden Sie Tools wie npm-Audit oder Garnaudit um Schwachstellen in Abhängigkeiten zu identifizieren und zu beheben.

Sicherheitslücken beim serverseitigen Rendern (SSR)

• SSR kann Sicherheitsrisiken mit sich bringen, wenn es nicht ordnungsgemäß implementiert wird.
• Stellen Sie sicher, dass Benutzereingaben vor dem Rendern auf dem Server bereinigt und validiert werden.
• Verwenden Sie dangerouslysetinnerHTML vorsichtig und nur bei Bedarf.

Schadensbegrenzung

• Bereinigen und validieren Sie Benutzereingaben auf dem Server vor dem Rendern.
• Benutzen Gefährlich gesetztes inner-HTML vorsichtig und nur wenn nötig.
• Implementieren Sie SSR-Frameworks unter Berücksichtigung von Sicherheitsaspekten.

Seitenübergreifende Anforderungsfälschung (CSRF)

• React-Apps können anfällig für CSRF-Angriffe sein, wenn sie keine geeigneten Anti-CSRF-Maßnahmen implementieren.
• Implementieren Sie CSRF-Tokens und Richtlinien für denselben Ursprung, um unbefugte Anfragen zu verhindern.

Schadensbegrenzung

• Implementieren Sie Anti-CSRF-Tokens, um Anfragen zu validieren.
• Verwenden Sie Richtlinien für denselben Ursprung und die Überprüfung von Verweisen, um nicht autorisierte Anfragen zu verhindern.

Offenlegung sensibler Daten

• Die Offenlegung vertraulicher Informationen im clientseitigen Code kann zu Datenschutzverletzungen führen.
• Vermeiden Sie es, sensible Daten wie API-Schlüssel, Token oder Anmeldeinformationen im clientseitigen Code zu speichern.
• Verwenden Sie Umgebungsvariablen, serverseitigen Speicher oder sichere Token-Anbieter für die Verwaltung sensibler Daten.

Schadensbegrenzung

• Vermeiden Sie es, sensible Daten in clientseitigem Code zu speichern.
• Verwenden Sie Umgebungsvariablen oder serverseitigen Speicher für vertrauliche Informationen.
• Verschlüsseln Sie sensible Daten, bevor Sie sie speichern.

Unsachgemäße Authentifizierung und Autorisierung

• Unsachgemäß implementierte Authentifizierungs- und Autorisierungsmechanismen können zu unberechtigtem Zugriff führen.
• Verwenden Sie etablierte Authentifizierungsbibliotheken und Frameworks und implementieren Sie angemessene Autorisierungsprüfungen sowohl auf Client- als auch auf Serverseite.

Schadensbegrenzung

• Verwenden Sie etablierte Authentifizierungsbibliotheken und Frameworks.
• Implementieren Sie korrekte Autorisierungsprüfungen sowohl auf der Client- als auch auf der Serverseite.
• Wenden Sie bei der Gewährung des Zugriffs auf Ressourcen das Prinzip der geringsten Rechte an.

Code-Injektion

• Die Verwendung von eval () oder Function () mit Benutzereingaben kann zu Sicherheitslücken durch Codeinjektion führen.
• Vermeiden Sie die Verwendung dieser Funktionen mit nicht vertrauenswürdigen Daten und bevorzugen Sie sicherere Alternativen wie JSON.parse ().

Schadensbegrenzung

• Vermeiden Sie die Verwendung von Funktionen wie Eval () oder Funktion () mit nicht vertrauenswürdigen Daten.
• Verwenden Sie sichere Alternativen wie JSON.parse () zum Parsen von JSON-Daten.

Unsichere Datenspeicherung

• Das Speichern sensibler Daten im lokalen Speicher oder in Cookies ohne Verschlüsselung kann Daten Angreifern aussetzen.
• Verwenden Sie sichere Speichermechanismen wie SessionStorage- oder HttpOnly-Cookies für sensible Daten.

Schadensbegrenzung

• Vermeiden Sie es, sensible Daten im lokalen Speicher oder in Cookies zu speichern.
• Verwenden Sie sichere Speichermechanismen wie Sitzungsspeicher oder Nur HTTP Cookies für sensible Daten.

So verhindern Sie React JS-Probleme — Tipps

Obwohl React normalerweise als leistungsstarke Technologie angesehen wird, kann auch React zu Problemen führen, wenn es nicht sorgfältig eingesetzt wird.

Achten Sie bei der Entwicklung von React-Apps von Anfang an auf gute Praktiken und versuchen Sie, potenzielle Stolpersteine im Voraus zu identifizieren.

Dieser Ansatz hilft Ihrem Team, zu einem späteren Zeitpunkt Zeit zu sparen, und verhindert, dass Benutzer Probleme haben.

<span class="colorbox1" fs-test-element="box1"><h3>Um die häufigsten Probleme mit der React-App zu vermeiden:</h3> <ol><li>Überlegen Sie, ob serverseitiges Rendern in Ihrem speziellen Fall von Vorteil wäre</li>. <li>Führen Sie gegebenenfalls ein Bundle-Splitting mit Webpack oder einem anderen JavaScript-Bundler durch.</li> <li>Zerlegen Sie React-Benutzeroberflächen, damit sie einfacher zu lesen und zu testen sind.</li> <li>Denken Sie daran, dass Sie Ihre Web-App schneller machen können, indem Sie den vorhandenen Code nicht hinzufügen, sondern indem Sie den vorhandenen Code durch React ersetzen.</li> <li>Schauen Sie sich an, welche Komponenten häufig neu gerendert werden, finden Sie heraus, wie oft dies unnötig ist, und entscheiden Sie mithilfe einer Vergleichsfunktion, welche Renderings erforderlich sind.</li> </ol></span><li>Verwenden Sie virtualisierte Listen, um die Leistung auf Geräten mit niedrigen Spezifikationen zu verbessern.</li>