React: Die Kernkomponenten des Erstellens interaktiver Benutzeroberfl?chen

React ist eine beliebte JavaScript-Front-End-Bibliothek zum Erstellen interaktiver Benutzeroberfl?chen. Die Lernkurve ist relativ flach, was einer der Gründe ist, warum sie in letzter Zeit viel Aufmerksamkeit erregt hat.

Obwohl es viele wichtige Konzepte zu lernen gibt, sind Komponenten zweifellos der Kern von React. Ein tiefes Verst?ndnis von Komponenten erleichtert Ihre React -Entwicklungsreise.

Voraussetzungen

Dieses Tutorial richtet sich an Anf?nger, die gerade erst anfangen, Reagieren zu lernen und ein besseres Verst?ndnis für Komponenten zu haben. Wir werden mit Komponenten -Fundamenten beginnen und dann allm?hlich in herausfordernere Konzepte wie Komponentenmuster und wann zu verwenden. Wir werden verschiedene Komponentenkategorien abdecken, z. B. Klassenkomponenten und Funktionskomponenten, staatliche und zustandslose Komponenten sowie Containerkomponenten und Pr?sentationskomponenten.

Fangen wir an!

Was sind Komponenten?

Komponenten sind in sich geschlossene, unabh?ngige Miniatureinheiten, die einen Teil der Benutzeroberfl?che beschreiben. Die Benutzeroberfl?che der Anwendung kann in kleinere Komponenten mit jeweils eigenem Code, Struktur und API aufgeteilt werden.

Wenn Sie sich beispielsweise die Webanwendungen von Facebook ansehen, verfügt es über Tausende von miteinander verbundenen Funktionen. Interessanterweise enth?lt Facebook 30.000 Komponenten und die Anzahl w?chst. Mit der Komponentenarchitektur k?nnen Sie unabh?ngig über jede Komponente nachdenken. Jede Komponente kann alles innerhalb seines Geltungsbereichs aktualisieren, ohne sich Sorgen darüber zu machen, wie sich sie andere Komponenten auswirkt.

Wenn wir die Benutzeroberfl?che von Facebook als Beispiel einnehmen, ist die Suchleiste ein geeigneter Komponentenkandidat. Der News -Feed von Facebook kann eine andere Komponente (oder eine Komponente, die viele Unterkomponenten enth?lt) bilden. Alle Methoden und Ajax -Aufrufe, die sich auf die Suchleiste beziehen, befinden sich in dieser Komponente.

Komponenten sind ebenfalls wiederverwendbar. Dies ist einfach zu implementieren, wenn Sie die gleiche Komponente an mehreren Stellen verwenden müssen. Mit der JSX -Syntax k?nnen Sie Komponenten deklarieren, wo immer Sie sie anzeigen müssen.

<code><div>
<br>    Aktuelle Anzahl: {count}<br><hr>
<br>    {/* Beispiel für die Wiederverwendbarkeit von Komponenten*/}<br>            updateCount = {setCount (count 1)}/><br>            updateCount = {setCount (count-1)}/><br>
</div>
<br></code>

Requisiten und Zustand

Komponenten erfordern die Arbeit von Daten. Sie k?nnen Komponenten und Daten auf zwei verschiedene Arten kombinieren: als Requisiten oder Zustand . Requisiten und Zustand bestimmen, wie Komponenten gerendert und verhalten werden. Beginnen wir mit Requisiten.

Requisiten verstehen

Wenn die Komponente eine normale JavaScript -Funktion ist, ist Props die Funktionseingabe. Nach dieser Analogie nimmt die Komponente die Eingabe (wir nennen es Requisiten), verarbeitet sie und rendert dann einen JSX -Code.

W?hrend die Daten in Requisiten für Komponenten zug?nglich sind, lautet die Philosophie von React, dass Requisiten unver?nderlich und oben nach unten sein sollten. Dies bedeutet, dass die übergeordnete Komponente alle Daten an die untergeordnete Komponente als Requisiten übergeben kann, aber die untergeordnete Komponente kann ihre Requisiten nicht ?ndern. Wenn Sie also versuchen, Requisiten wie unten zu bearbeiten, erhalten Sie einen Fehler mit "Wert nicht zuweisen". useState() -Haken wird wie folgt verwendet:

 <code>const [count,setCount] = useState(0);<br></code>

Sie k?nnen dann setCount() verwenden, um die aktuelle Anzahl zu erhalten.

Klassenkomponenten

Klassenkomponenten sind m?glicherweise komplexer als funktionale Komponenten, aber einige Menschen bevorzugen diesen Stil.

Sie k?nnen eine Klassenkomponente erstellen, indem Sie super() erweitern, um Inhalte zu übergeben, die von der übergeordneten Klasse geerbt wurden.

Beachten Sie, dass der Konstruktor beim Definieren einer Komponente optional ist. Im obigen Fall hat die Komponente keinen Zustand und der Konstruktor scheint keine nützlichen Operationen auszuführen. Requisiten.

Die Best Practice ist es, Konstruktoren für alle Klassenkomponenten zu verwenden.

Wenn Sie einen Konstruktor verwenden, müssen Sie super() anrufen, andernfalls erhalten Sie einen Fehler "fehlender Super () -Anruf im Konstruktor".

In meinem letzten Punkt geht es darum, count und count zu verwenden, wenn Sie Hooks oder this.setState() verwenden, um den Status zu aktualisieren. useState() Hook gibt eine zweite Funktion zurück, mit der Sie den Status mit dem neuen Wert aktualisieren k?nnen.

 <code>// 這有效<br><br>// 鉤子<br>const [count,setCount] = useState(0);<br> setCount(count value);<br><br> // 類組件<br>handleCount(value) {<br>    this.setState({count: this.state.count value});<br> }<br></code>

Dann setCount() nimmt ein Objekt als Eingabe an, wir erh?hen den vorherigen Wert der count um 1, was wie erwartet funktioniert. Es gibt jedoch ein Problem. Wenn es mehrere setState() gibt, um die Anzahl um 100 zu erh?hen, aktualisieren Sie sie auf 1 und l?schen Sie dann die zuvor hinzugefügten 100. Wenn setState() asynchron ist und mehrere prevState auf frühere Zust?nde verweisen und garantiert auf dem neuesten Stand sind. React.memo wird für Haken verwendet. All dies mag ein wenig verwirrend klingen, wenn Sie neu reagieren. Wenn das gleiche Ergebnis garantiert zurückgegeben wird, wenn die gleichen Requisiten und der gleiche Zustand angegeben werden, wird die Komponente als reine Komponente bezeichnet. Staurose Komponenten sind ein gutes Beispiel für reine Komponenten, da Sie bei einer Eingabe wissen, was Sie rendern werden.

 <code>const HelloWorld = ({name}) => (<br></code> {`Hi $ {name}`}<br> );<br>

Wenn Ihre Komponente rein ist, k?nnen Sie sie mit PureComponent optimieren. Diese Methoden ?ndern das Aktualisierungsverhalten von React -Komponenten. Standardm??ig werden React -Komponenten immer aktualisiert, wenn sich Status oder Requisiten ?ndern. Wenn Sie jedoch memo verwenden, führt React flache Vergleiche für Requisiten und Zustand durch. Dies bedeutet, dass Sie den direkten Inhalt des Objekts vergleichen, anstatt alle Schlüssel-/Wertpaare des Objekts rekursiv zu vergleichen. Daher werden also nur Objektreferenzen verglichen, die m?glicherweise nicht wie erwartet funktionieren, wenn der Zustand oder die Requisiten ge?ndert werden.

 <code>// 類組件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 鉤子<br>const MyComponent = React.memo(function MyComponent(props) { // 將組件函數(shù)包裝在React.memo 中<br> // ...<br> });<br></code>

React.memo wird verwendet, um die Leistung zu optimieren, und es gibt keinen Grund, sie zu verwenden.

Der letzte Gedanke

Funktionskomponenten und Hooks sind normalerweise viel einfacher als ihre Gegenstücke der Klassenkomponente. Sofern Sie also nicht spezielle Einstellungen haben, sind Funktionskomponenten die beste Wahl.

In diesem Tutorial verfügen Sie über einen hochrangigen überblick über konstruktionsbasierte Architekturen und verschiedene Komponentenmuster in React.

Dieser Artikel wurde aktualisiert und enth?lt den Beitrag von Jacob Jackson. Jacob ist ein Webentwickler, Tech -Autor, Freiberufler und Open -Source -Mitarbeiter.

Das obige ist der detaillierte Inhalt vonStateful vs. Stauress funktionelle Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!