👨🏿‍🚀 👇🏾 👊🏾 Reagieren Sie auf Best Practices und Tipps, die jeder Entwickler kennen sollte. Teil 1 👑 😯 ⛴️

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "React Best Practices & Tips, die jeder React-Entwickler kennen sollte, Punkt 1" von Alex Devero.

Bild

React ist eine der beliebtesten Bibliotheken zum Erstellen interaktiver Benutzeroberflächen. In diesem Artikel zeige ich Ihnen einige Beispiele für Best Practices von React, die Ihnen helfen, ein besserer Entwickler zu werden. Lesen Sie diese Anweisungen, um das Schreiben von React-Code zu verbessern.

Inhalt:

Halten Sie Ihre Komponenten klein
Vermeiden Sie es, Komponenten zu stapeln
Reduzieren Sie die Verwendung von Stateful-Komponenten
Verwenden Sie Funktionskomponenten mit Hooks und Memo anstelle von Komponenten in Klassen
Verwenden Sie keine Requisiten im Originalzustand.

Epilog: Reagieren Sie auf Best Practices und Tipps, die jeder Entwickler kennen sollte Teil 1

1. Halten Sie Ihre Komponenten klein

Komponenten klein zu halten, ist eine der Best Practices von React, die Wunder wirken können. Wenn Sie nur diese scheinbar einfache Vorgehensweise implementieren, können Sie saubereren und wartbareren Code schreiben. Ganz zu schweigen davon, dass es helfen kann, die Vernunft aufrechtzuerhalten, oder zumindest was noch übrig ist.

Es gibt eine bewährte Faustregel, die Sie verwenden können. Schauen Sie sich die Rendermethode an. Wenn es mehr als 10 Zeilen enthält, ist Ihre Komponente wahrscheinlich zu groß und ein guter Kandidat für das Refactoring und die Aufteilung in mehrere kleinere Komponenten. Denken Sie daran, dass eine der Ideen für die Verwendung von React oder ein Teil seiner Philosophie darin besteht, Code wiederzuverwenden.

Das Ziel ist es, Codeteile zu erstellen, die Sie einmal schreiben, und diese dann bei Bedarf immer wieder zu verwenden. Unter diesem Gesichtspunkt ist es nicht sinnvoll, alle Ihre Daten zu einer massiven Komponente, einer Datei, zu kombinieren. Und selbst wenn Sie sich wirklich nicht für wiederverwendbaren Code interessieren, denken Sie darüber nach. Wie einfach werden Komponenten mit Hunderten von Codezeilen unterstützt?

Eine solche Komponente ist schwer zu warten, zu debuggen und zu aktualisieren. Dies bedeutet auch, dass die Arbeit mit dieser Komponente viel länger dauert. Mit anderen Worten, Ihre Gesamtleistung wird darunter leiden. Und früher oder später wird es dich verrückt machen. Oder es wird deine Teamkollegen und Kollegen verrückt machen und sie werden dich verrückt machen.

Was auch immer Sie wählen, Sie werden bald den Verstand verlieren und sich vielleicht selbst Feinde machen. Das ist es nicht wert. Halten Sie Ihre Komponenten klein. Behalten Sie Freundschaften, geistige Gesundheit, Zeit und Produktivität. Vereinfachen Sie das Debuggen, Aktualisieren und Verwalten von Code. Betrachten Sie ein Beispiel.

War

/// // file: index.jsx import React from 'react' const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] class Bookshelf extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <div> <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> </div> ) } } // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

Ist geworden

 /// // file: books-data.js const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] export default booksData /// // file: components/books-table.jsx import React from 'react' class BooksTable extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> ) } } export default BooksTable /// // file: components/search-bar.jsx import React from 'react' class SearchBar extends React.Component { render() { return ( <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> ) } } export default SearchBar /// // file: components/bookshelf.jsx import React from 'react' // Import components import BooksTable from './components/books-table' import SearchBar from './components/search-bar' class Bookshelf extends React.Component { render() { return ( <div> <SearchBar /> <BooksTable books={this.props.books} /> </div> ) } } export default Bookshelf /// // file: index.jsx import React from 'react' // Import components import Bookshelf from './components/bookshelf // Import data import booksData from './books-data' // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

2. Vermeiden Sie es, Komponenten zu stapeln

Jede Regel sollte mit Vorsicht angewendet werden. Dies gilt auch für diese Best Practices von React, insbesondere für die vorherige. Wenn es um Komponenten geht, ist es sehr einfach, sie zu übertreiben und selbst kleinste Codeteile in Form von Komponenten zu schreiben. Mach das nicht. Es macht keinen Sinn, jeden Absatz, jede Spanne oder jeden Teil zu einer Komponente zu machen.
Denken Sie nach, bevor Sie beginnen, jede Komponente in kleine Teile zu unterteilen. Sie können sich die Komponente als eine Mischung aus „HTML“ vorstellen, die nur eines tut, unabhängig ist und vom Benutzer als Ganzes wahrgenommen wird. Ist es sinnvoll, diesen Code zu einer Komponente zu machen? Wenn nicht, kombinieren Sie diesen Code. Andernfalls teilen Sie es auf.

Schauen wir uns einige Beispiele an, um diese Definition einer Komponente zu veranschaulichen. Ein Beispiel ist der modale Dialog. Diese Komponente kann aus vielen kleinen Elementen bestehen, z. B. Divs, Überschriften, Textabschnitten, Schaltflächen usw. Theoretisch können alle diese Elemente in kleine Komponenten unterschieden werden.

In der Praxis ist dies sinnlos. Ja, einige dieser Elemente können unabhängig voneinander existieren. Ist es jedoch wirklich nützlich, eine Komponente zu erstellen, die nur aus einem Absatz oder einer Überschrift besteht? Was wird als nächstes passieren? Komponente für Beschriftung, Eingabe oder sogar Spanne? Dieser Ansatz ist nicht nachhaltig.

Glücklicherweise gibt es eine andere Sichtweise. Sie können die atomare Entwurfsmethode als Leitfaden verwenden. Beim atomaren Design ist alles in sechs Kategorien unterteilt: Atome, Moleküle, Organismen, Vorlagen, Seiten und Dienstprogramme. Sie beginnen mit den kleinsten Elementen wie Schaltflächen, Links, Verknüpfungen, Eingaben usw. Das sind Atome.

Dann kombinieren Sie die Atome und erzeugen die Moleküle. Beispiele für Moleküle können ein modaler Dialog, ein Formular, ein Popup-Fenster, ein Dropdown-Menü, eine Navigation usw. sein. Außerdem können Sie ein Molekül mit einem anderen oder mit einem Atom kombinieren und einen Organismus erstellen. Ein Beispiel für einen Organismus ist eine Überschrift, eine Produktliste oder ein Einkaufskorb. Vorlagen, Seiten und Dienstprogramme sind nicht mehr wichtig.

Wie kann man Atomdesign mit diesen beiden Best-Practice-Beispielen für React-Komponenten kombinieren? Lassen Sie uns nicht komplizieren. Eine Komponente kann mehr als ein Atom sein, d.h. Molekül, Organismus oder sogar eine Vorlage oder Seite, wenn sie an ihre Grenzen gehen. In diesem Sinne sind Bezeichnung, Überschrift und Absatz keine Komponenten, da es sich um Atome handelt.
Modale Dialoge, Formulare, Popups, Dropdown-Listen usw. sind Komponenten, da sie sich alle entweder auf Moleküle oder auf die Kategorie eines Organismus beziehen. Es gibt noch einige zweifelhafte Elemente, wie z. B. eine Schaltfläche. Ja, aus Sicht der Atomstruktur ist es ein Atom. Es kann jedoch in vielen Variationen unabhängig voneinander existieren und trotzdem funktionieren.

In solchen Fällen empfehle ich, nicht an die Best Practices von React zu denken und mich nur von meinen inneren Instinkten leiten zu lassen. Am Ende sind Sie es, die mit dem Code arbeiten. Wichtig ist, dass Sie sich wohl fühlen. Befolgen Sie also nicht blindlings eine Liste mit Best Practices. Und wenn Sie in einem Team arbeiten? Teilen Sie Ihre Gedanken dazu mit Ihren Kollegen.

3. Reduzieren Sie die Verwendung von Stateful-Komponenten

Dies ist eine der besten Reaktionsmethoden, die seit einiger Zeit angewendet wird. Diese Vorgehensweise wurde jedoch mit dem Aufkommen von React 16.8.0 und React Hooks immer beliebter. Zuvor mussten Sie, wenn Sie state oder eine andere Lebenszyklusmethode verwenden wollten, auch eine stateful-Komponente verwenden. Es gab keinen anderen Weg.

Hooks hat das geändert. Nach ihrer offiziellen Enthüllung waren die React-Entwickler nicht mehr auf Stateful-Komponenten beschränkt, da sie State verwenden mussten. Dank Hooks können React-Entwickler jetzt zustandslose Komponenten mithilfe von Status- und sogar Lebenszyklusmethoden nach Belieben schreiben.

Warum ist das wichtig? Zustandslose oder funktionale Komponenten sind in Bezug auf die Leistung im Allgemeinen besser als zustandsbehaftete Komponenten. Der Grund ist, dass es keine Zustands- oder Lebenszyklusmethoden gibt. Mit anderen Worten, weniger Code zum Ausführen sowie zum Transpilieren. Natürlich kann dieser Unterschied kaum spürbar und fast unsichtbar sein, wenn Sie an einem sehr kleinen Projekt arbeiten.

Diese kleinen Unterschiede können sich jedoch summieren, wenn Ihr Projekt wächst. Denken Sie auch daran, wie viele Codezeilen eine statusbehaftete Komponente im Vergleich zu funktionalen benötigt. Die Funktionalität ist auch kürzer und oft leichter zu lesen. Schauen wir uns die Schaltflächenkomponente an, die als Komponente mit Statussteuerung und Funktionen definiert ist. Welches magst du mehr?

 // Button defined as a stateful component class Button extends React.Component { handleClick = () => { // Do something } render() { return( <button type="button" onClick={this.handleClick}>Click me</button> ) } } // Button defined as a functional component const Button = () => { const handleClick = () => { // Do something } return( <button type="button" onClick={handleClick}>Click me</button> ) }

4. Verwenden Sie Funktionskomponenten mit Hooks und Memo anstelle von Komponenten für Klassen

Wie bereits erwähnt, müssen Sie keine statusbehafteten Komponenten mehr verwenden, um den Status zu verwenden. Darüber hinaus glauben einige React-Entwickler, dass React in Zukunft beginnen wird, sich vom Unterricht zu entfernen. Ist das wahr, jetzt spielt es keine Rolle. Wichtig ist, dass eine Funktionskomponente jetzt dank Hooks den Status verwenden kann.
Und zweitens hat der Einsatz von Funktionskomponenten seine Vorteile. TLDR? Es gibt keine Klasse, Vererbung und keinen Konstruktor. Dieses Schlüsselwort gibt es nicht. Best Practices für strenge Reaktionen. Hohes Signal-Rausch-Verhältnis. Geschwollene Komponenten und schlechte Datenstrukturen sind leichter zu erkennen. Der Code ist leichter zu verstehen und zu überprüfen. Und wieder ist die Leistung besser.

Und noch etwas. Viele React-Entwickler waren gegen funktionale Komponenten. Eines der Probleme besteht darin, dass Sie als React-Entwickler den Renderprozess bei Verwendung einer Funktionskomponente nicht steuern können. Wenn sich etwas ändert, gibt React eine Funktionskomponente zurück, unabhängig davon, ob die Komponente selbst geändert wurde.
In der Vergangenheit bestand die Lösung darin, eine reine Komponente zu verwenden. Die saubere Komponente bietet die Möglichkeit, Status und Requisiten zu vergleichen. Dies bedeutet, dass React „prüfen“ kann, ob sich der Inhalt der Komponente, der Requisiten oder der Komponente selbst geändert hat. Wenn ja, wird er es zurückgeben. Andernfalls wird das erneute Rendern übersprungen und das zuletzt gerenderte Ergebnis wiederverwendet. Weniger Rendering bedeutet bessere Leistung.
Mit React 16.6.0 ist dies kein Problem mehr und das Argument gegen Funktionskomponenten ist nicht mehr gültig. Was das Spiel verändert hat, war Memo. Memo brachte einen flachen Vergleich mit einer Funktionskomponente, die Fähigkeit zu „überprüfen“, ob sich der Inhalt der Komponente, der Requisiten oder der Komponente selbst geändert hat.

Basierend auf diesem Vergleich gibt React die Komponente entweder zurück oder verwendet das Ergebnis des letzten Renderings erneut. Kurz gesagt, mit memo können Sie „saubere“ Funktionskomponenten erstellen. Es gibt keinen Grund mehr, Statefull-Komponenten oder reine Komponenten zu verwenden. Zumindest, wenn Sie mit einer schwierigen Situation nicht fertig werden müssen.

In diesem Fall sollten Sie in Betracht ziehen, anstelle des Status der Komponenten etwas Skalierbareres und Verwaltbareres wie MobX, Redux oder Flux zu verwenden. Eine andere mögliche Option wäre die Verwendung des Kontexts. In jedem Fall gehören funktionale Komponenten dank Hooks und Memo zu den besten React-Methoden, über die man nachdenken sollte.

5. Verwenden Sie keine Requisiten im Originalzustand

Dies ist eine der besten Reaktionspraktiken, die ich gerne kennen würde, als ich anfing zu lernen. Dann wusste ich nicht, dass es eine sehr schlechte Idee war, Requisiten im Ausgangszustand zu verwenden. Warum ist das eine schlechte Idee? Das Problem ist, dass der Konstruktor während der Komponentenerstellung nur einmal aufgerufen wird.

Dies bedeutet, dass der Status der Komponenten nicht aktualisiert wird, wenn Sie das nächste Mal einige Änderungen an den Requisiten vornehmen. Es wird seine frühere Bedeutung behalten. Dann habe ich fälschlicherweise angenommen, dass die Requisiten mit dem Zustand synchronisiert sind. Wenn sich also einige Details ändern, ändert sich der Status, um diese Änderung widerzuspiegeln. Dies ist leider nicht so.

Dies ist möglicherweise kein Problem, wenn der Status beim ersten Rendern nur einmal Werte von Requisiten erhalten soll und Sie den Status innerhalb der Komponente steuern möchten. Andernfalls können Sie dieses Problem mit componentDidUpdate lösen. Wie der Name schon sagt, können Sie mit dieser Lebenszyklusmethode eine Komponente aktualisieren, wenn sich etwas ändert, z. B. Requisiten.

Wenn Sie sich für diese Methode entscheiden, denken Sie an eines. Es wird nicht in das anfängliche Rendern einbezogen, sondern nur in das nächste. Stellen Sie daher sicher, dass Sie den Status der Komponente mit den erforderlichen Werten initialisieren, die möglicherweise von Requisiten stammen. Verwenden Sie dann componentDidUpdate, um diese Werte und die Komponente nach Bedarf zu aktualisieren.

Epilog: Reagieren Sie auf Best Practices und Tipps, die jeder Entwickler kennen sollte Teil 1

Glückwunsch! Sie haben gerade den ersten Teil dieser Mini-Artikelserie über die Best Practices von React fertiggestellt. Heute haben Sie fünf Methoden kennengelernt, mit denen Sie React-Code kürzer, einfacher, besser, schneller und einfacher zu lesen und zu warten machen können. Jetzt liegt es an Ihnen, die Praxis, mit der Sie einverstanden sind, umzusetzen und sie anzuwenden.

Im nächsten Teil lernen Sie verschiedene Best Practices und Tipps kennen, mit denen Sie Ihren React-Code sowie Ihre Programmierkenntnisse verbessern können. Nehmen Sie bis dahin das, was Sie heute gelernt haben, und verbringen Sie einen Teil Ihrer Zeit mit dem Üben.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie ihn bitte.

Ursprünglich im Alex Devero Blog veröffentlicht.