Eine detaillierte Analyse der neuen Funktionen von React 16+, Teil 1: Allgemeine Informationen

Heute präsentieren wir Ihnen den ersten Teil der Übersetzung dieses großartigen Materials. Es widmet sich einer detaillierten Analyse der neuen React-Funktionen, die seit Version 16 in dieser Bibliothek enthalten sind. Der Autor dieses Materials beschäftigt sich seit 5 Jahren mit der Programmierung. In der Vergangenheit war er Designer und versuchte sich als Illustrator. Er hat Comics in den Artikel aufgenommen, die seiner Meinung nach den Lesern helfen werden, besser zu verstehen, was diskutiert wird.

Im Original trägt dieser Artikel den Titel "React wieder einführen: Jedes React-Update seit Version 16 entmystifiziert". Der Titel weist darauf hin, dass der Leser, der vielleicht bereits mit React vertraut ist, eingeladen ist, diese Bibliothek erneut kennenzulernen. Diese Wiedereinführung in React wird ihm helfen, das zu organisieren, was er bereits weiß, und etwas Neues zu entdecken.

Wie lese ich dieses Material?

Bevor Sie diesen Artikel lesen, können Sie das E-Book herunterladen, das kostenlos verteilt wird. Es stellt dasselbe Material dar, das als eigenständige PDF-, Epub- oder Mobi-Datei konzipiert ist. Das Buch enthält Codebeispiele mit Syntaxhervorhebung. Vielleicht ist es für Sie bequemer, das Material zu lesen und den Code basierend auf dem Buch parallel durchzuarbeiten. Darüber hinaus wird empfohlen, dieses Repository zu verwenden. Den Code der hier diskutierten Beispiele finden Sie hier.

Für wen und warum wurde dieses Material geschrieben?

Ich habe meine erste React App vor ungefähr 4 Jahren geschrieben. Seitdem haben sich die Grundprinzipien von React nicht geändert. Vor uns liegt der gleiche deklarative Code und alle gleichen Komponenten. All dies ist gut, aber die Art und Weise, wie moderne React-Anwendungen geschrieben werden, unterscheidet sich von der vorherigen. Im Laufe der Jahre sind in React viele neue Dinge aufgetaucht, und ein Teil dieser Bibliothek wurde entfernt.

Wenn Sie React lange studiert haben, ist es durchaus möglich, dass Sie mit den neuen Funktionen dieser Bibliothek nicht besonders vertraut sind. Darüber hinaus kann sogar derjenige, der den Innovationen folgt, sozusagen in ihnen „verloren gehen“. Wie kann man die Situation beheben, indem man erkennt, dass das Alte verworfen werden muss und welches der Neuen akzeptiert werden sollte? Wie heben Sie die modernen React-Funktionen hervor, die Sie möglicherweise besonders nützlich finden?

Sogar ich, ein erfahrener Programmierer, verliere mich manchmal, wenn nötig, um etwas Altes zu vergessen und stattdessen etwas Neues zu lernen. Dies mag so schwierig aussehen wie das Erlernen eines völlig neuen Konzepts.

Wenn Sie auch so etwas fühlen, dann hoffe ich, dass meine Arbeit Ihnen helfen kann, alles an seinen Platz zu bringen.

Das Gleiche gilt für diejenigen, die gerade erst begonnen haben, React zu lernen.

Es gibt viele veraltete Informationen. Wenn Sie React aus einigen ziemlich alten Veröffentlichungen lernen, können Sie die Grundlagen sicher beherrschen. In der modernen React-Entwicklung gibt es jedoch viele neue interessante Funktionen, die Ihre Aufmerksamkeit verdienen. Es ist am besten, diese Funktionen so schnell wie möglich kennenzulernen, anstatt später die alten Arbeitsmethoden zu vergessen und stattdessen neue zu lernen.

In der Tat werden wir hier im Detail alles Neue analysieren, was in React 16+ aufgetaucht ist.

Was ist neu in React 16+?

Auf den ersten Blick scheint es, dass in React nach der Veröffentlichung von Version 16 nicht so viele Änderungen vorgenommen wurden. In Wirklichkeit ist dies jedoch nicht der Fall. Hier ist, worüber wir sprechen werden:

1. Neue Methoden für den Lebenszyklus von Komponenten.
2. Vereinfachte Statusverwaltung mithilfe der Kontext-API.
3. Die Eigenschaften contextType und Context API.
4. Profiler-Anwendung: Diagramme, Interaktionsanalyse.
5. Lazy Laden von Materialien mit React.lazy und Suspense.
6. Eine funktionale Version von PureComponent-basierten Komponenten, die mit React.memo erstellt wurden.
7. Vereinfachen Sie React-Anwendungen mithilfe von Hooks.
8. Erweiterte hakenbasierte Reaktionsmuster für React-Anwendungen.

Jedes Element in dieser Liste wird als separater großer Abschnitt dargestellt. Der erste Abschnitt konzentriert sich auf neue Techniken des Komponentenlebenszyklus.

Liebe Leser! Wir überlegen jetzt, ob wir die Fortsetzung dieses Materials übersetzen sollen. Wenn Ihnen das Thema React-Development nahe steht, laden wir Sie ein, abzustimmen und zu kommentieren.