Stateful vs. Stauress funktionelle Komponenten in React

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) { // 将组件函数包装在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!