React Hooks: So starten Sie und bauen Sie Ihre eigenen auf

Haken haben die React -Welt im Sturm erobert. In diesem Tutorial werden wir uns ansehen, was Haken sind und wie Sie sie verwenden. Ich werde Ihnen einige gemeinsame Haken vorstellen, die mit React versenden und Ihnen zeigen, wie Sie Ihre eigenen schreiben. Wenn Sie fertig sind, können Sie Hooks in Ihren eigenen React -Projekten verwenden.

Key Takeaways

• reag -aoks vereinfachen Sie die Komponentenlogik: Mit Hooks können Sie Status und andere React -Funktionen ohne Klassen verwenden, um Ihren Code sauberer zu machen und einfacher zu verstehen.
• UsSestate und UseEffect sind grundlegend: Mit `Usestate" können Sie Funktionskomponenten zu Zustand hinzufügen, während "Useffect" Nebenwirkungen mit den zuvor in Lebenszyklusmethoden wie "componentDidmount" und "componentDidUpdupdate" verwalteten Verhandlungen hinzufügen.
• Benutzerdefinierte Haken verbessern die Wiederverwendbarkeit: Sie können Ihre eigenen Hooks erstellen, um die Komponentenlogik in wiederverwendbare Funktionen zu extrahieren und Ihre Codebasis trockener zu machen (wiederholen Sie sich nicht).
• Hooks unterstützen mehrere Zustände und Effekte: Sie können mehrere `usestate`- und` useeffect- Instanzen in einer einzelnen Komponente verwenden, um verschiedene Zustandsstücke und verschiedene Effekte zu verwalten.
• Haken von Drittanbietern erweitern die Funktionalität: Die Verwendung von Hooks aus Bibliotheken von Drittanbietern kann zusätzliche Funktionen effizient einführen, z.
Übergang von Klasse zu funktionellen Komponenten: Die Einführung von Hooks bietet einen leistungsstarken Anreiz, vorhandene klassenbasierte Komponenten in funktionale Einrichtungen neu zu überarbeiten, wodurch eine verbesserte Lesbarkeit und Wartbarkeit eingesetzt wird.

Was sind React -Hooks?

React -Hooks sind spezielle Funktionen, mit denen Sie Funktionen in Funktionskomponenten „anschließen“ können. Mit dem Usestate -Hook können Sie beispielsweise Status hinzufügen, während Sie bei der Verwendung von Effecteffect Nebenwirkungen ausführen können. Zuvor wurden Nebenwirkungen unter Verwendung von Lebenszyklusmethoden implementiert. Bei Haken ist dies nicht mehr erforderlich.

Dies bedeutet, dass Sie beim Erstellen einer React -Komponente keine Klasse mehr definieren müssen. Es stellt sich heraus, dass die in React verwendete Klassenarchitektur die Ursache für viele Herausforderungen ist, denen sich die Entwickler jeden Tag gegenübersehen. Wir schreiben oft große, komplexe Komponenten, die schwer zu trennen sind. Der verwandte Code wird über mehrere Lebenszyklusmethoden verteilt, die schwierig zu lesen, aufrechtzuerhalten und zu testen sind. Darüber hinaus müssen wir uns mit diesem Schlüsselwort befassen, wenn wir auf Status, Requisiten und Methoden zugreifen. Darauf müssen wir auch Methoden binden, um sicherzustellen, dass sie innerhalb der Komponente zugänglich sind. Dann haben wir das übermäßige Prop-Bohrproblem-auch als Wrapper Hell bekannt-im Umgang mit Komponenten höherer Ordnung.

Kurz gesagt, Hooks sind eine revolutionäre Funktion, die Ihren Code vereinfacht und das Lesen, Aufrechterhalten, Testen in Isolation und Wiederverwendung in Ihren Projekten erleichtert. Sie werden nur eine Stunde brauchen, um sich mit ihnen vertraut zu machen, aber dies lässt Sie anders darüber nachdenken, wie Sie React -Code schreiben.

React Hooks wurden erstmals auf einer React -Konferenz, die im Oktober 2018 stattfand, angekündigt und sie wurden offiziell in React 16,8 zur Verfügung gestellt. Das Merkmal befindet sich noch in der Entwicklung; Es werden noch eine Reihe von React -Klasse -Funktionen in Haken migriert. Die gute Nachricht ist, dass Sie sie jetzt verwenden können. Sie können immer noch React -Klassenkomponenten verwenden, wenn Sie möchten, aber ich bezweifle, dass Sie nach dem Lesen dieses Einführungshandbuchs möchten.

Wenn ich Ihre Neugier geweckt habe, lassen Sie uns eintauchen und einige praktische Beispiele sehen.

Voraussetzungen

Dieses Tutorial ist für Menschen gedacht, die ein grundlegendes Verständnis dafür haben, was React ist und wie es funktioniert. Wenn Sie ein React -Anfänger sind, sehen Sie sich bitte unseren ersten Beginn mit React Tutorial an, bevor Sie hier fortfahren.

Wenn Sie den Beispielen folgen möchten, sollten Sie bereits eine React -App einrichten. Der einfachste Weg, dies zu tun, besteht darin, das Tool Create React App zu erstellen. Um dies zu verwenden, werden Node und NPM installiert. Wenn Sie dies nicht getan haben, besuchen Sie die Node.js -Download -Seite und holen Sie sich die neueste Version für Ihr System (NPM wird mit Knoten gebündelt). Alternativ können Sie unser Tutorial zur Installation des Knotens mit einem Versionsmanager konsultieren.

Wenn der Knoten installiert ist, können Sie eine neue React -App wie SO erstellen:

npx create-react-app myapp

Dies erstellt einen MyApp -Ordner. Wechseln Sie in diesen Ordner und starten Sie den Entwicklungsserver wie SO:

<span>cd myapp
</span><span>npm start
</span>

Ihr Standardbrowser wird geöffnet und Sie sehen Ihre neue React -App. Für die Zwecke dieses Tutorials können Sie in der App -Komponente arbeiten, die sich unter SRC/App.js befindet.

Sie können auch den Code für dieses Tutorial auf GitHub sowie eine Demo des fertigen Code am Ende dieses Tutorials finden.

Der Usestate Hook

Schauen wir uns jetzt einen Code an. Der Usestate -Haken ist wahrscheinlich der häufigste Haken, der mit React versendet. Wie der Name schon sagt, können Sie Status in einer Funktionskomponente verwenden.

Betrachten Sie die folgende React -Klassenkomponente:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Wenn Sie mit der React -App erstellen, ersetzen Sie einfach den Inhalt von app.js durch die oben genannten.

So sieht es aus:

Geben Sie sich eine Minute, um den Code zu verstehen. Im Konstruktor deklarieren wir eine Namenseigenschaft in unserem Zustandsobjekt und verbinden eine Handlenamechange -Funktion an die Komponenteninstanz. Wir haben dann ein Formular mit einer Eingabe, deren Wert auf diesen.state.Name eingestellt ist. Der Wert, der in dieser State.name gehalten wird

Wenn ein Benutzer etwas in das Eingangsfeld eingibt, wird die Funktion Handlenamechange aufgerufen, die den Status und folglich die Begrüßung aktualisiert.

Jetzt werden wir eine neue Version dieses Codes mit dem Usestate -Hook schreiben. Die Syntax sieht so aus:

npx create-react-app myapp

Wenn Sie die Usestate -Funktion aufrufen, gibt es zwei Elemente zurück:

• Zustand: Der Name Ihres Staates - wie diese.state.name oder this.state.location.
• setState: Eine Funktion zum Festlegen eines neuen Wertes für Ihren Zustand. Ähnlich wie dies.setState ({Name: NewValue}).

Der InitialState ist der Standardwert, den Sie Ihrem neu deklarierten Zustand während der staatlichen Deklarationsphase geben. Jetzt, da Sie eine Vorstellung davon haben, was UsSestate ist, lassen Sie es uns in die Tat umsetzen:

<span>cd myapp
</span><span>npm start
</span>

Beachten Sie die Unterschiede zwischen dieser Funktionsversion und der Klassenversion. Es ist bereits viel kompakter und einfacher zu verstehen als die Klassenversion, aber beide tun genau dasselbe. Lassen Sie uns die Unterschiede durchgehen:

• Der gesamte Klassenkonstruktor wurde durch den Usestate -Hook ersetzt, der nur aus einer einzelnen Zeile besteht.
• Da der Usestate -Hook lokale Variablen ausgibt, müssen Sie das Schlüsselwort nicht mehr verwenden, um Ihre Funktions- oder Statusvariablen zu verweisen. Ehrlich gesagt ist dies ein großer Schmerz für die meisten JavaScript -Entwickler, da nicht immer klar ist, wann Sie dies verwenden sollten.
• Der JSX -Code ist jetzt sauberer, da Sie auf lokale Zustandswerte verweisen können, ohne dies zu verwenden. State.

Ich hoffe, Sie sind jetzt beeindruckt! Möglicherweise fragen Sie sich, was zu tun ist, wenn Sie mehrere staatliche Werte deklarieren müssen. Die Antwort ist ganz einfach: Rufen Sie einfach einen weiteren Usestate -Haken an. Sie können so oft deklarieren, wie Sie möchten, vorausgesetzt, Sie überkomplizieren Ihre Komponente nicht.

Hinweis: Stellen Sie bei Verwendung von React -Hooks sicher, dass Sie sie oben in Ihrer Komponente und nie in einem bedingten.

deklarieren.

Multiple Usestate Hooks

Aber was ist, wenn wir mehr als ein Eigentum im Staat deklarieren wollen? Kein Problem. Verwenden Sie einfach mehrere Anrufe, um zu usedate.

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Hier ist ein Beispiel für eine Komponente mit mehreren Usestate -Hooks:

ganz einfach, nicht wahr? Wenn Sie dasselbe in der Klassenversion tun, müssen Sie dieses Schlüsselwort noch mehr verwenden.

Lassen Sie uns nun zum nächsten Basis -React -Hook übergehen.

useEffect Hook

Die meisten React -Komponenten sind erforderlich, um eine bestimmte Operation wie das Abrufen von Daten, das Abonnieren eines Datenstroms oder die manuelle Änderung des DOM erforderlich. Diese Art von Operationen werden als Nebenwirkungen bezeichnet.

In klassenbasierten Komponenten würden wir unseren Nebenwirkungen CODE in der Regel in componentDidmount und componentDidUpdate einfügen. Dies sind Lebenszyklusmethoden, mit denen wir die Render -Methode zum richtigen Zeitpunkt auslösen können.

Hier ist ein einfaches Beispiel:

npx create-react-app myapp

Dieses Code wird den Dokumenttitel basierend auf dem festlegen, was im Bundesstaat gehalten wird. Wenn Sie jedoch versuchen, Änderungen der Statuswerte über das Formular vorzunehmen, passiert nichts. Um dies zu beheben, müssen Sie eine weitere Lebenszyklusmethode hinzufügen:

<span>cd myapp
</span><span>npm start
</span>

Aktualisieren des Formulars sollte jetzt auch den Dokumenttitel aktualisieren.

Lassen Sie uns sehen, wie wir dieselbe Logik mit dem Useffect -Hook implementieren können. Aktualisieren Sie die Funktionskomponente oben wie folgt:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Mit nur diesen wenigen Codezeilen haben wir die Arbeit von zwei Lebenszyklusmethoden in einer einfachen Funktion implementiert.

Hinzufügen von Reinigungscode

Dies war ein einfaches Beispiel. Es gibt jedoch Fälle, in denen Sie Reinigungscode schreiben müssen, z. B. abmeldung von einem Datenstrom oder von einem Ereignishörer. Sehen wir uns ein Beispiel dafür an, wie dies normalerweise in einer React -Klasse -Komponente implementiert wird:

<span>const [state, setState] = useState(initialState);
</span>

Der obige Code zeigt die aktuelle Auflösung Ihres Browserfensters an. Die Größe des Fensters ändern und Sie sollten die Nummern automatisch aktualisieren. Wenn Sie in Chrom f11 drücken, sollte es die vollständige Auflösung Ihres Monitors anzeigen. Wir haben auch die Lebenszyklusmethodekomponenten verwendet, um das Ereignis der Größe zu nicht registrieren.

replizieren wir den oben genannten klassenbasierten Code in unserer Hook-Version. Wir müssen einen dritten Usestate -Haken und einen zweiten Use Effect -Hook definieren, um diese neue Funktion zu bewältigen:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>Hello {name}</p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

erstaunlicherweise macht diese Hakenversion des Code genau das gleiche. Es ist sauberer und kompakter. Der Vorteil, Code in eine eigene Verwendung zu geben, besteht darin, dass wir ihn leicht testen können, da der Code isoliert ist.

Haben Sie bemerkt, dass wir in diesem Useffect -Hook eine Funktion zurückgeben? Dies liegt daran, dass jede Funktion, die Sie in einer Verwendungseffektfunktion zurückgeben, als Code für die Reinigung angesehen wird. Wenn Sie keine Funktion zurückgeben, wird keine Reinigung durchgeführt. In diesem Fall ist die Reinigung erforderlich, da Sie sonst auf eine Fehlermeldung an Ihrer Browserkonsole begegnet sind, in der sie mit der Aufschrift "kein React-Status-Update für eine nicht verfolgte Komponente durchführen kann".

benutzerdefinierte React -Hooks

Jetzt, da Sie über den Usestate und die Verwendung von Haken gelernt haben, lassen Sie mich Ihnen eine wirklich coole Möglichkeit zeigen, Ihren Code noch kompakter, sauberer und wiederverwendbarer zu machen, als wir bisher erreicht haben. Wir werden einen benutzerdefinierten Hook erstellen, um unseren Code noch weiter zu vereinfachen.

Wir werden dies tun, indem wir die Größe der Größe extrahieren und außerhalb unserer Komponente platzieren.

Erstellen Sie eine neue Funktion wie folgt:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>  <span>const [location, setLocation] = useState("Nairobi");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>function handleLocationChange(e) {
</span>    <span>setLocation(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>        <span><section>
</span>          <span><label htmlFor="location">Location</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="location"
</span>            id<span>="location"
</span>            value<span>={location}
</span>            onChange<span>={handleLocationChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>
</span>        <span>Hello {name} from {location}
</span>      <span></p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

In der Komponente müssen Sie diesen Code in der Komponente ersetzen:

<span>componentDidMount() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

… damit:

<span>componentDidUpdate() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

Löschen Sie den zweiten Gebrauchseffektcode. Speichern Sie Ihre Datei und testen Sie sie. Alles sollte genauso funktionieren wie zuvor.

Jetzt, da wir unseren ersten benutzerdefinierten Hook erstellt haben, lassen Sie uns das Gleiche für den Dokumenttitel tun. Löschen Sie zunächst den verbleibenden Anruf, um in der Komponente Effekte zu verwenden. Fügen Sie dann außerhalb der Komponente den folgenden Code hinzu:

npx create-react-app myapp

Rufen Sie es schließlich aus der Komponente aus:

<span>cd myapp
</span><span>npm start
</span>

Gehen Sie zurück zu Ihrem Browser und geben Sie etwas in die Eingabefelder ein. Der Dokumenttitel sollte sich genau wie zuvor ändern.

Lassen Sie uns schließlich die Formfelder refaktor. Wir möchten einen Haken erstellen, um ihren Wert mit einem entsprechenden Wert im Zustand synchronisiert zu halten.

Beginnen wir mit dem benutzerdefinierten Haken. Fügen Sie das folgende außerhalb der Komponente hinzu:

<span>import <span>React</span> from "react";
</span>
<span>export default class ClassDemo extends React<span>.Component</span> {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>    <span>this.state = {
</span>      <span>name: "Agata"
</span>    <span>};
</span>    <span>this.handleNameChange = this.handleNameChange.bind(this);
</span>  <span>}
</span>
  <span>handleNameChange(e) {
</span>    <span>this.setState({
</span>      <span>name: e.target.value
</span>    <span>});
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>      <span><section>
</span>        <span><form autoComplete="off">
</span>          <span><section>
</span>            <span><label htmlFor="name">Name</label>
</span>            <span><input
</span>              type<span>="text"
</span>              name<span>="name"
</span>              id<span>="name"
</span>              value<span>={this.state.name}
</span>              onChange<span>={this.handleNameChange}
</span>            <span>/>
</span>          <span></section>
</span>        <span></form>
</span>        <span><p>Hello {this.state.name}</p>
</span>      <span></section>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Aktualisieren Sie die Komponente, um sie zu verwenden:

<span>const [state, setState] = useState(initialState);
</span>

Gehen Sie den Code langsam durch und identifizieren Sie alle Änderungen, die wir vorgenommen haben. Ziemlich ordentlich, oder? Unsere Komponente ist viel kompakter.

Für die Zwecke dieses Tutorials haben wir unsere Haken als Funktionen innerhalb derselben Datei wie die Komponente deklariert, die sie verwendet. In einem normalen React -Projekt haben Sie jedoch einen Hooks -Ordner mit jedem dieser Haken in einer separaten Datei, die dann überall überall importiert werden kann.

Wir könnten sogar so weit gehen, die UseFireInput-, GebrauchsocumentTitle- und UsewindowResolution -Haken in ein externes NPM -Modul zu veröffentlichen, da sie völlig unabhängig von der Hauptlogik unseres Codes sind. Wir können diese benutzerdefinierten Hooks in anderen Teilen des Projekts oder sogar in Zukunft problemlos wiederverwenden.

Als Referenz finden Sie hier die komplette Hakenkomponentenversion:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>Hello {name}</p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Die Komponente des Haken sollte sich genau wie die Klassenkomponentenversion verhalten:

Wenn Sie die Hakenversion mit der Klassenkomponentenversion vergleichen, werden Sie feststellen, dass die Hook -Funktion Ihren Komponentencode um mindestens 30%reduziert. Sie können Ihren Code sogar weiter reduzieren, indem Sie die wiederverwendbaren Funktionen in eine NPM -Bibliothek exportieren.

Schauen wir uns als nächstes an, wie wir die Haken anderer Personen in unserem Code verwenden können.

Daten abrufen mit Haken von Drittanbietern

Schauen wir uns ein Beispiel dafür an, wie Sie Daten mit Axios und React -Hooks von einer REST -JSON -API abholen können. Wenn Sie zu Hause folgen, müssen Sie die Axios -Bibliothek installieren:

<span>import <span>React, { useState }</span> from "react";
</span>
<span>export default function <span>HookDemo</span>(props) {
</span>  <span>const [name, setName] = useState("Agata");
</span>  <span>const [location, setLocation] = useState("Nairobi");
</span>
  <span>function handleNameChange(e) {
</span>    <span>setName(e.target.value);
</span>  <span>}
</span>
  <span>function handleLocationChange(e) {
</span>    <span>setLocation(e.target.value);
</span>  <span>}
</span>
  <span>return (
</span>    <span><section>
</span>      <span><form autoComplete="off">
</span>        <span><section>
</span>          <span><label htmlFor="name">Name</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="name"
</span>            id<span>="name"
</span>            value<span>={name}
</span>            onChange<span>={handleNameChange}
</span>          <span>/>
</span>        <span></section>
</span>        <span><section>
</span>          <span><label htmlFor="location">Location</label>
</span>          <span><input
</span>            type<span>="text"
</span>            name<span>="location"
</span>            id<span>="location"
</span>            value<span>={location}
</span>            onChange<span>={handleLocationChange}
</span>          <span>/>
</span>        <span></section>
</span>      <span></form>
</span>      <span><p>
</span>        <span>Hello {name} from {location}
</span>      <span></p>
</span>    <span></section>
</span>  <span>);
</span><span>}
</span>

Ändern Sie Ihre Komponente, um so auszusehen:

<span>componentDidMount() {
</span>  <span>document.title = this.state.name + " from " + this.state.location;
</span><span>}
</span>

Wir sollten die folgende Ausgabe erwarten:

Es ist möglich, den oben genannten Code neu zu gestalten, indem Sie Ihren eigenen benutzerdefinierten Haken so erstellen, wie wir nicht mehr Usestate verwenden und Effect -Hooks verwenden müssen. Zum Glück haben viele Entwickler diese Quest bereits erfüllt und ihre Arbeit als Paket veröffentlicht, das wir in unserem Projekt installieren können. Wir werden Axios-Hooks von Simone Busoli verwenden, was zufällig am beliebtesten ist.

Sie können das Paket mit dem Befehl installieren:

npx create-react-app myapp

unten habe ich den obigen Code mit Axios-Hooks überarbeitet:

<span>cd myapp
</span><span>npm start
</span>

Wir haben nicht nur den Usestate und die Nutzungseffekthaken aus unserem Code losgeworden, sondern wir haben auch drei neue Fähigkeiten ohne zusätzliche Gehirnleistung von unserem Teil gewonnen:

• zum Anzeigen von Ladestatus
• , um Fehlermeldungen
anzuzeigen
• , um Daten aus einem Klick auf eine Schaltfläche zu fördern

Die Lektion hier besteht darin, das Rad neu zu erfinden. Google ist dein Freund. In der JavaScript -Welt besteht eine hohe Chance, dass jemand das Problem, das Sie angehen möchten, bereits gelöst hat.

Demo

unten ist eine lebende Demo dessen, was wir bisher erreicht haben:

offizielle React -Hooks

Dies sind die grundlegenden React-Hooks, auf die Sie in Ihren täglichen React-Projekten stoßen:

• Usestate: Für die Verwaltung des lokalen Staates
• useEffect: Ersetzt Lebenszyklusfunktionen
• usecontext: Ermöglicht Ihnen, problemlos mit der React Context API (Lösung des Prop -Bohrproblems) zu arbeiten

Wir haben auch zusätzliche offizielle React -Hooks, die Sie möglicherweise verwenden müssen, abhängig von Ihren Projektanforderungen:

• Usereducer: Eine erweiterte Version von UsEsEsState zur Verwaltung komplexer Zustandslogik. Es ist sehr ähnlich wie bei Redux.
• UseCallback: Gibt eine Funktion zurück, die einen zwischengespeicherbaren Wert zurückgibt. Nützlich für die Leistungsoptimierung, wenn Sie unnötige Wiederholer verhindern möchten, wenn sich die Eingabe nicht geändert hat.
• Usememo: Gibt einen Wert aus einer meierisierten Funktion zurück. Ähnlich wie berechnet, wenn Sie mit Vue vertraut sind.
• Useref: Gibt ein veränderliches Ref -Objekt zurück, das für die Lebensdauer der Komponente bestehen bleibt.
• Anwendungshandel: Passen Sie den Instanzwert an, der übergeordnete Komponenten ausgesetzt ist, wenn Ref.
verwendet wird
• uselayouteffect: Ähnlich wie bei der Verwendungseffekte, aber synchron nach allen DOM -Mutationen.
• usedebugValue: Zeigt ein Etikett für benutzerdefinierte Hooks in React -Entwickler -Tools an.

Sie können alles über diese Haken in der offiziellen React -Dokumentation lesen.

Zusammenfassung

Die React -Community hat positiv auf die neue React -Hooks -Funktion reagiert. Es gibt bereits ein Open-Source-Repository namens Awesome-React-Hooks, und Hunderte von benutzerdefinierten React-Hooks wurden diesem Repository eingereicht. Hier ist ein kurzes Beispiel für einen dieser Haken zum Speichern von Werten im lokalen Speicher:

npx create-react-app myapp

Sie müssen den lokalen Storage-Haken mit NPM oder Garn wie diesem installieren, um ihn zu verwenden:

<span>cd myapp
</span><span>npm start
</span>

Ziemlich ordentlich, oder?

Die Einführung von React Hooks hat einen großen Spritzer gemacht. Seine Wellen sind über die React -Community hinaus in die JavaScript -Welt übergegangen. Dies liegt daran, dass Hooks ein neues Konzept sind, das dem gesamten JavaScript -Ökosystem zugute kommt. Tatsächlich hat das Vue.js -Team kürzlich etwas Ähnliches namens Composition API veröffentlicht.

Die Rede von React -Hooks und der Kontext -API, die Redux von seinem Staatsmanagement -Thron stürzt. Haken haben eindeutig viel einfacher gemacht und die Art und Weise, wie wir neue Code schreiben, geändert. Wenn Sie wie ich sind, haben Sie wahrscheinlich einen starken Drang, alle Ihre React -Komponentenklassen neu zu schreiben und sie durch funktionelle Komponentenhaken zu ersetzen.

Beachten Sie, dass dies nicht wirklich notwendig ist: Das React -Team plant nicht, die React -Klassenkomponenten abzubauen. Sie sollten sich auch bewusst sein, dass noch nicht alle React Class -Lebenszyklusmethoden mit Hooks möglich sind. Möglicherweise müssen Sie sich etwas länger an React -Komponentenklassen halten.

Wenn Sie sich mit Ihrem neuen Wissen über grundlegende React -Hooks zuversichtlich genug fühlen, möchte ich Ihnen eine Herausforderung überlassen. Refactor diese Countdown -Timer -Klasse mit React -Hooks, um sie so sauber und kompakt wie möglich zu gestalten.

Happy Coding und lassen Sie mich wissen, wie Sie es kommen!

FAQs auf React Hooks

Was sind React -Hooks?

React -Hooks sind Funktionen, mit denen Sie den React -Zustand und Lebenszyklus -Merkmalen in funktionellen Komponenten „einfügen“ können. Sie wurden in React 16.8 eingeführt, um Status- und andere React -Merkmale zu ermöglichen, ohne Klassenkomponenten zu schreiben.

Warum wurden React -Hooks eingeführt?

React-Hooks wurden eingeführt, um die Wiederverwendung der staatlichen Logik in Funktionskomponenten zu vereinfachen und so den Komponentenzustand und die Nebenwirkungen zu vereinfachen. Haken?

Sie können den Usestate -Hook verwenden, um funktionale Komponenten Status hinzuzufügen. Es gibt ein Array mit dem aktuellen Statuswert und einer Funktion zurück, um es zu aktualisieren.

Mit dem UseEffect-Hook können Sie Nebenwirkungen in Ihren Funktionskomponenten wie Daten abrufen, DOM-Manipulation und mehr durchführen. Diese Effekte werden korrekt behandelt.

Kann ich mehrere verwenden Verwenden Sie und verwenden Sie Effect -Haken in einer einzigen Komponente?

Ja, Sie können mehrere Instanzen von Usestate verwenden und Haken in einer einzelnen Funktionskomponente verwenden, um verschiedene Zustände und Effekte zu verwalten.

Der UseContext -Hook wird zum Zugriff auf den Kontext in funktionalen Komponenten verwendet. Sie können Kontextwerte konsumieren, ohne eine Kontext -Verbraucherkomponente zu rendern.

Wofür wird der Usernucer -Haken verwendet und wann sollte ich ihn verwenden?

Der Usereducer -Haken ist eine Alternative, um eine komplexere Staatsmanagement zu verwenden. Es ist nützlich, wenn Sie staatliche Übergänge auf vorhersehbare Weise verwalten müssen.

Sie können benutzerdefinierte Hooks erstellen, indem Sie Funktionen definieren, die integrierte Hooks oder andere benutzerdefinierte Hooks verwenden. Diese benutzerdefinierten Haken können staatliche Logik über Komponenten zusammenfassen und teilen.

Die Schlüsselregeln für die Verwendung von Hooks umfassen nur in funktionalen Komponenten, die Verwendung von Hooks auf der oberen Ebene (nicht innerhalb von Schleifen oder Bedingungen) und sicherzustellen, dass ihre Reihenfolge in der Komponente auf Neurendern konsistent bleibt.

Gibt es Leistungsüberlegungen mit React -Hooks?

Bei korrekter Anwendung können React-Hooks die Leistung verbessern, indem unnötige Neuanfänger reduziert werden. Es ist jedoch wichtig, die Usememo- und Usecallback -Hooks zu verwenden, um die Leistung bei Bedarf zu optimieren.

Das obige ist der detaillierte Inhalt vonReact Hooks: So starten Sie und bauen Sie Ihre eigenen auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!