Wie haben sie das gemacht? Wie sind sie von denen, die PR nicht ohne fremde Hilfe eröffnen können, zu denen gekommen, an die sich andere wenden, um Hilfe zu erhalten? Was hat Menschen dazu gebracht, um Rat zu fragen, die bereit sind, anderen Ratschläge zu geben? Wie wurden Schüler Lehrer? Ich habe ihnen diese Fragen gestellt. Hier ist, was sie geantwortet haben.
1. Verwenden Sie ESLint und TypeScript
JavaScript ist eine lose typisierte Programmiersprache. Mit dieser Sprache können wir das gleiche Problem auf unzählige Arten lösen. JavaScript verfügt über keine integrierten Mechanismen, die uns davor schützen, fehlerhaften Code oder Code mit schlechter Leistung zu schreiben. Glücklicherweise können wir die Situation verbessern, indem wir auf zwei Tools für die statische Code-Analyse zurückgreifen. Dies sind TypeScript und ESLint.
Durch die Verwendung von ESLint für die statische Code-Analyse können wir Probleme identifizieren, bevor sie in die Produktion gelangen. Wir können den Code anhand unserer Standards überprüfen. Dies verbessert die Wartbarkeit der Codebasis.
Sie können beispielsweise das ESLint-Plugin installieren
eslint-plugin-react-hooks... Dieses Plugin wird das Problem im folgenden Code bemerken, der völlig normal aussieht, und uns darüber informieren, dass wir gegen eine der Regeln für die Verwendung von Hooks verstoßen .
// ,
if (userName !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', userName);
});
}
Mit TypeScript können Sie ein statisches Typsystem verwenden, um verwandte Fehler abzufangen. Wenn Sie TypeScript verwenden, können Sie den leistungsstarken IntelliSense-Tooltip verwenden, mit dem Sie schneller und einfacher mit verschiedenen Komponenten und Bibliotheken arbeiten können. Die QuickInfos, die beim Schreiben Ihres Codes angezeigt werden, enthalten Informationen zu den internen Mechanismen von Komponenten und Bibliotheken. Dies beschleunigt das Refactoring und fördert Codierungskonventionen wie Generika.
Jemand, der gut in TypeScript ist, wird nicht nur ein besserer JavaScript-Programmierer, sondern beginnt schließlich, besseren React-Code zu schreiben.
2. Machen Sie sich mit React Hooks vertraut
React Hooks haben seit ihrer Einführung im Februar 2019 buchstäblich die Welt der React-Entwicklung übernommen. Obwohl das React-Team sagt, dass Sie alten Code nicht umgestalten sollten, indem Sie ihn in Hooks übersetzen, sind Hooks heutzutage buchstäblich überall.
Wenn Sie im Bereich der React-Entwicklung vorankommen möchten, können Sie sich am besten die Zeit nehmen, um die Haken gründlich zu lernen, damit Sie sie vollständig verstehen können.
Benötigen Sie eine Nebenwirkung? Wenn ja, dann ist der Haken
useEffectdein bester Freund. Müssen Sie den Status einer Komponente überwachen und erneut rendern, wenn sich der Status ändert? Schau es dir anuseState. Müssen Sie einige Werte zwischen den Renderings speichern und aktualisieren, aber wenn sich diese Werte ändern, rendern Sie nicht? Oder müssen Sie die Höhe oder Breite von DOM-Elementen kennen? Dann ist dein Freund das useRef.
Schauen wir uns zum Beispiel den einfachsten Anwendungsfall an
useEffect. Angenommen, wir möchten, dass der Seitentitel aktualisiert wird (in Form eines Nebeneffekts), wenn auf eine Schaltfläche geklickt wird. Sie können versuchen, dieses Problem folgendermaßen zu lösen:
useEffect(() => {
document.title = `You clicked ${count} times`;
}); //
Dieser Hook ist einfach zu optimieren, da er nicht bei jedem Rendern ausgeführt wird, sondern nur, wenn sich die Variable ändert
count. Dies erfolgt durch Einfügen der countAbhängigkeiten in das Array:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // count
Sie sollten mit den gängigsten Haken vertraut sein und Ihre eigenen Haken erstellen. Sie sollten sich auch mit dem rationalen Umgang mit Haken auskennen. Wenn Sie beispielsweise wissen, wann Hooks verwendet werden, scheint dies zu einem
useEffecterneuten Rendern zu führen, wenn dies nicht der Fall ist.
3. Optimieren Sie Ihren Code nicht zu früh
Das Gespräch über Hooks führt uns zum Thema vorzeitige Optimierung. Zu oft habe ich aufstrebende React-Entwickler gesehen, die sich die Mühe gemacht haben, ihren Code so schnell wie möglich zu erstellen. Reaktionscode wird meistens mit Hooks
useMemound optimiert useCallback. Ihre Verwendung ist jedoch nicht immer gerechtfertigt.
Schauen wir uns eine einfache Komponente an, die eine Reihe von Süßwareninformationen enthält
props. Die Komponente filtert das Array und zeigt eine Liste der Namen von Pralinen an (deren Eigenschaft typeeinem Zeichenfolgenwert entspricht chocolate).
Einige Entwickler haben möglicherweise den unwiderstehlichen Drang, Code ähnlich dem unten gezeigten zu schreiben. Sie könnten denken: "Ich werde die Pralinenliste nur aktualisieren, wenn sich die Gesamtliste der Süßwaren ändert." Die Implementierung dieser Idee führt zu Code, der mit schwer lesbaren Hilfskonstrukten überladen ist.
const Chocolate = (props) => {
const chocolates = useMemo(
() => props.candies.filter((candy) => candy.type === "chocolate"),
[props.candies]
);
return (
<>
{chocolates.map((item) => (
<p>{item.name}</p>
))}
</>
);
};
Anstatt eine solche Komponente zu erstellen, würde ich vorschlagen, einfachen und sauberen Code zu schreiben. In solchen Fällen gibt es keinen Grund zur Verwendung
useMemo. Hooks useMemooder useCallbacksollten nur zum Speichern der Ergebnisse komplexer Vorgänge verwendet werden, die das System stark belasten.
Ich empfehle, den Beginn der Optimierungsarbeiten zu verschieben, bis Sie eine Messung der Anwendungsleistung erhalten, die eindeutig auf ein Problem hinweist.
Sie sollten es nicht überall verwenden
useCallbackund useMemonur, weil Sie kürzlich irgendwo darüber gelesen haben. Optimieren Sie nicht alles. Warten Sie besser, bis das Problem auftritt, und lösen Sie es dann. Lösen Sie keine nicht vorhandenen Probleme.
4. Wissen, wann neue Komponenten erstellt werden müssen
Ich habe viele aufstrebende React-Programmierer gesehen, die die Geschäftslogik eines Projekts in Komponenten implementiert haben, die eine reine Präsentationsrolle spielen sollen. Um Ihren Code so wiederverwendbar wie möglich zu machen, ist es wichtig, Komponenten zu erstellen, die so einfach und bequem wie möglich wiederverwendbar sind.
Um dies zu erreichen, müssen Sie sich bemühen, die Trennung zwischen Präsentationskomponenten und Komponenten, die eine Art Logik implementieren, aufrechtzuerhalten. Früher bestand eine übliche Technik darin, Komponenten in "Container" und tatsächlich "Komponenten" zu unterteilen. Dieser Ansatz verlor jedoch allmählich an Relevanz.
Schauen wir uns eine Komponente an, die eine Liste von Elementen von irgendwoher lädt und auf der Seite anzeigt. Beachten Sie, dass diese beiden Aufgaben in derselben Komponente implementiert sind.
const ListItems = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Es kann verlockend sein, den "Container" -Routenweg zu nehmen. Nach diesem Ziel werden wir zwei Komponenten erstellen:
const ListContainer = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return <List items={items} />;
};
const List = (props) => {
return (
<>
{props.items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Aber in einer solchen Situation sollten Sie anders handeln. Sie müssen nämlich diejenigen Teile der Komponente abstrahieren, die eine reine Präsentationsrolle spielen. Das Ergebnis sind zwei Komponenten - eine Komponente
List(Liste) und eine Komponente Item(Element):
const List = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<Item item={item} />
))}
</>
);
};
const Item = ({ item }) => {
return (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
);
};
5. Achten Sie besonders auf das Testen
Das Niveau der Kenntnisse in Testtechnologien unterscheidet Junioren von Senioren. Wenn Sie mit dem Testen von React-Anwendungen nicht vertraut sind, können Sie eine Menge Materialien darüber finden und studieren.
Vielleicht haben Sie irgendwann ein paar Komponententests geschrieben, aber Ihre Erfahrung reicht nicht aus, um Integrationstests zu erstellen, die die gesamte Anwendung umfassen? Dies sollte Sie nicht stören, da es wiederum unzählige Ressourcen gibt, die Ihnen helfen, Wissenslücken und Erfahrungen zu schließen. Hier ist
zum Beispiel mein Artikel über den vollständigen Zyklus des Testens einer vollständigen Stapelanwendung basierend auf React.
6. Unterscheiden Sie zwischen Situationen, in denen Sie den lokalen und den globalen Status verwenden sollten
Hier werden wir auf das Thema Verwalten des Anwendungsstatus in React eingehen. Es gibt unzählige Technologien, um dieses Problem zu lösen. Dies sind beispielsweise Redux, Mobx, Rückstoß, API
contextund vieles mehr. Es ist nicht einmal einfach, sie aufzulisten.
Unabhängig davon, für welche Statusverwaltungstechnologie Sie sich entscheiden, werden React-Junioren häufig verwirrt, wenn sie entscheiden, ob sie einen globalen oder einen lokalen Status verwenden. Leider gibt es keine klaren Regeln, um solche Entscheidungen eindeutig zu treffen. Einige Regeln zu diesem Thema können jedoch noch formuliert werden. Beantworten Sie die folgenden Fragen, um zu entscheiden, ob Sie den globalen oder lokalen Status zum Speichern einiger Daten verwenden möchten:
- Benötigen wir eine Komponente, die nicht direkt mit unserer Komponente zusammenhängt, um mit ihren Daten arbeiten zu können? Beispielsweise kann der Name des Benutzers in der Navigationsleiste und auf dem Begrüßungsbildschirm angezeigt werden.
- Sollten Daten beim Navigieren zwischen Anwendungsseiten bestehen bleiben?
- Verwenden viele Komponenten dieselben Daten?
Wenn diese Fragen positiv beantwortet werden können, kann es sich lohnen, den globalen Zustand auszunutzen. Aber ich sage Ihnen gleich, Sie sollten keine Informationen darüber speichern, was mit dem Menü im globalen Zustand passiert. Versuchen Sie bei der Entscheidung, wo einige Daten gespeichert werden sollen, darüber zu spekulieren, welche Daten an verschiedenen Stellen in der Anwendung verwendet werden und welche Daten möglicherweise nur innerhalb der Komponenten gespeichert werden.
Ergebnis
Jetzt wissen Sie, welche Wege Sie gehen sollten, um im Bereich der Reaktionsentwicklung professionell zu wachsen.
Wenn ich an den Code zurückdenke, den ich als React Junior geschrieben habe, fällt mir eines ein. Ich habe überkomplizierten Code geschrieben, der schwer zu verstehen war. Als ich mehr Erfahrung sammelte, bemerkte ich, wie mein Code einfacher wurde. Je einfacher der Code, desto besser. Mein Code ist jetzt leicht zu verstehen, und Sie können ihn sogar sechs Monate nach dem Schreiben verstehen, wenn sich herausstellt, dass sich ein Fehler darin eingeschlichen hat, der behoben werden muss.
Welche Wege zur beruflichen Weiterentwicklung für React-Programmierer kennen Sie?
