Verwendung von Funktionskomponenten in React

Haben Sie sich gefragt, wie Sie eine Komponente in React erstellen können?

Um zu antworten, ist es so einfach wie das Erstellen einer Funktion, die eine HTML-ähnliche Syntax zurückgibt.

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

Nun wollen wir sehen, was im obigen Code passiert ist.  Counterist eine Funktion, die eine Zahl in HTML umwandelt. Und wenn Sie genauer hinschauen, Counterist das eine reine Funktion. Das ist richtig, die Art von Funktion, die das Ergebnis basierend auf ihren Eingaben zurückgibt und keine Nebenwirkungen hat.

Diese Erklärung bringt eine neue Frage mit sich. Was ist eine Nebenwirkung?

Kurz gesagt, ein Nebeneffekt ist jede Änderung der Umgebung außerhalb der Funktion oder jede gelesene Information aus der Umgebung, die sich ändern kann.

Möglicherweise haben Sie bemerkt, dass ich die Destrukturierungszuweisungssyntax in der Parameterliste verwendet habe, um die nEingabenummer zu extrahieren . Dies liegt daran, dass Komponenten ein einzelnes Objekt namens "Requisiten" als Eingabe verwenden, an das alle Eigenschaften gesendet werden.

So nkann der Parameter von jeder anderen Komponente aus eingestellt werden:

In gewissem Sinne kann man sich diese Syntax wie einen Funktionsaufruf vorstellen Counter({n: 1}). Ist das nicht richtig?

Lasst uns unsere Reise fortsetzen.

Können Funktionskomponenten einen Zustand haben? Wie der Komponentenname andeutete, möchte ich einen Zähler speichern und ändern. Was ist, wenn wir nur eine Variable deklarieren, die eine Zahl innerhalb der Komponente enthält? Wird es funktionieren?

Lass es uns herausfinden.

Ich werde zunächst die Variable innerhalb der Funktionskomponente deklarieren.

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

Fügen wir nun die Funktion hinzu, die die Nummer erhöht und in der Konsole protokolliert. Ich werde die Funktion als Ereignishandler für das Klickereignis verwenden.

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

Wenn wir uns die Konsole ansehen, sehen wir, dass die Nummer tatsächlich erhöht wird, aber dies wird nicht auf dem Bildschirm angezeigt. Irgendwelche Ideen?

Sie haben es richtig verstanden ... wir müssen die Nummer ändern, aber wir müssen sie auch auf dem Bildschirm neu rendern.

Hier kommt die Utility-Funktion von React Hooks ins Spiel. Diese Dienstprogrammfunktionen werden übrigens als Hooks bezeichnet und beginnen mit dem Wort "use". Wir werden einen von ihnen verwenden, useState. Ich werde auch den Text zum erneuten Rendern in der Konsole protokollieren, um zu sehen, wie oft die CounterFunktion tatsächlich aufgerufen wird.

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

Lesen wir, was useState()tut.

Was kommt useStatezurück? Es gibt ein Wertepaar zurück: den aktuellen Status und eine Funktion, die ihn aktualisiert.

In unserem Fall nist dies der aktuelle Status und setN()die Funktion, die ihn aktualisiert. Haben Sie die Konsole überprüft, um festzustellen, wie oft der Text zum erneuten Rendern angezeigt wird? Ich überlasse es Ihnen, das herauszufinden.

Wir können den Status nicht nur aktualisieren, indem wir den neuen Wert festlegen, sondern auch eine Funktion bereitstellen, die den neuen Wert zurückgibt.

In unserem Fall wird die Funktion aufgerufen, die den neuen Wert bereitstellt increment(). Wie Sie sehen, increment()ist eine reine Funktion.

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

Um zu verstehen, was setN(increment)funktioniert, lesen wir die Dokumentation.

Durch Übergeben einer Aktualisierungsfunktion können Sie auf den aktuellen Statuswert im Updater zugreifen.

OK, wird also increment()mit dem aktuellen nStatus aufgerufen und zur Berechnung des neuen Statuswerts verwendet.

Abschließende Gedanken

Fassen wir zusammen, was wir herausgefunden haben.

In React können wir einfach eine Komponente mithilfe einer Funktion definieren, die eine HTML-ähnliche Syntax zurückgibt.

Mit React Hooks können wir den Status in solche Funktionskomponenten definieren.

Und zu guter Letzt haben wir endlich die thisPseudoparameter in den Komponenten beseitigt. Vielleicht haben Sie bemerkt, dass es thisärgerlich wird, wenn Sie den Kontext ändern, wenn Sie es nicht erwarten. Keine Sorge. Wir werden nicht thisin funktionalen Komponenten verwenden.

Wenn Sie es bis hierher geschafft haben, können Sie sich auch meine Bücher ansehen.

Discover Functional JavaScript wurde als einer derbeste funktionale Programmierbücher von BookAuthority !

Weitere Informationen zum Anwenden funktionaler Programmiertechniken auf React finden Sie unter Functional React.

Lernen Sie funktionale Reaktionen projektbasiert mit funktionaler Architektur mit React und Redux .

Tweet mir dein Feedback.