logo

Das BEST REACT-Konzept (KEINE KLASSE ERFORDERLICH)

Reaktionskomponente

Wenn Sie mit React gearbeitet haben, sollten Sie bereits wissen, dass Komponenten die Bausteine ​​einer React-Anwendung sind. Seit der Veröffentlichung von React v0.13.0 ermöglichen uns Komponenten, die Benutzeroberfläche mithilfe von ES6-Klassen in wiederverwendbare und unabhängige Teile aufzuteilen.

import React from 'react';
import AnotherCompoment from './components/AnotherComponent';

// A React class component
export default class MyComponent extends React.Component {
  contructor(props) {
    super(props);
    this.state = {
      ...
    };
  }

  render() {
    <div>
      ...
      <AnotherComponent />
      ...
    </div>
  }
};

Funktionskomponente

Okay! Später mit der Version von React v0.14.0 hat das React-Team eine andere Möglichkeit eingeführt, Komponenten zu erstellen, die Funktionskomponenten genannt werden. Mit einer ES6-Pfeilfunktion (oder einer einfachen) Funktion könnten wir jetzt eine zustandslose erstellen Reaktionskomponente.

Diese Funktionskomponenten haben keinen Zustand , keine Lebenszyklusmethoden , aber sie sind einfach zu schreiben . Die Menge an Code, die Sie schreiben müssen, ist im Vergleich zu einer Klassenkomponente recht gering. 

import React from 'react';

export default const MyComponent = ({ name = "" }) => {
   return <div>Hello {name}!</div>
};

Dies eignet sich hervorragend für Komponenten, die nur eine Benutzeroberfläche rendern müssen.

Wenn unsere Komponente jedoch einen Zustand benötigt oder eine React-Lebenszyklusmethode verwenden muss, mussten wir eine Klasse verwenden. Das ist scheiße, oder? Was ist, wenn wir vom React-Zustand und den Lebenszykluskonzepten profitieren möchten, ohne eine Klasse 🧐 verwenden zu müssen? Jemand?

Reaktionshaken

Auch hier kam das React-Team mit der Version React v16.8 zu Hilfe. Sie haben das BEST-Konzept eingeführt zur bisherigen React-Bibliothek:React Hooks 🔥🚀!

Was? Du hast noch nichts von React Hooks gehört? Das ist okay, lass uns gemeinsam eintauchen.

Kurz gesagt, React-Hooks sind Funktionen, die es uns ermöglichen, Status- und andere React-Features innerhalb unserer Funktionskomponenten zu verwenden. Kein Kurs erforderlich! Ist das nicht wunderbar?

Denk darüber nach. Sie können jetzt einfache und lesbare Funktionskomponenten schreiben und trotzdem React-Konzepte verwenden. Keine Klassenerstellung mehr. Kein Konstrukteur mehr. Keine Bindung mehr. Keine doppelte Logik mehr. Kein Ärger mehr beim Teilen von nicht-visueller Logik zwischen Komponenten. Nicht mehr...

Ich habe es verstanden. Stellen wir uns vor, wir möchten ein Anmeldeformular erstellen, damit sich unsere Benutzer mit ihrer E-Mail-Adresse und ihrem Passwort bei unserer App authentifizieren können. Sehen Sie sich an, wie Sie die Benutzeroberfläche des Anmeldeformulars nur mit einer Funktionskomponente und React-Hooks erstellen.

Der Einfachheit halber werden wir nicht auf die Authentifizierungslogik eingehen, die ein völlig anderes Thema ist.

Anmeldeformular mit React Hooks

In Ordnung. Zuerst müssen wir unsere Funktionskomponente erstellen. Einfach richtig? 

import React from 'react';

export default const LoginForm = (props) => {
  return (
    <div>
      <h1>Login Form</h1>
    </div>
  );
}

Lassen Sie uns nun das Formular selbst erstellen, indem wir etwas JSX für die Eingabefelder und die Schaltfläche zum Senden schreiben. 

<form>
  <label>
    Email Address:
    <input type="text" />
  </label>
  <label>
    Password:
    <input type="password" />
  </label>
  <input type="submit" value="Submit" />
</form>

Um das Senden des Formulars zu handhaben und Zugriff auf die Daten zu haben, die der Benutzer darin eingibt, müssen wir unsere Formularkomponente in eine kontrollierte Komponente umwandeln . Das sind wir von Klassenkomponenten und dem React-Zustand gewohnt. Da wir jedoch keine Klasse mehr verwenden, brauchen wir eine neue Möglichkeit, den Zustand in unserer Funktionskomponente hinzuzufügen und zu verwalten.

Status-Hook - useState

Genau, seit React v16.8.0 gibt uns React die Möglichkeit, den Zustand innerhalb von Funktionskomponenten über den useState zu verwalten Methode. 

import React, { useState } from 'react';

Der useState -Methode muss wie alle anderen React-Hooks innerhalb einer Funktionskomponente verwendet werden. useState nimmt ein einziges Argument auf, den Anfangswert für den Zustand. Es gibt ein Array zurück, wobei das erste Element der zustandsbehaftete Wert und das zweite Element eine Funktion zum Aktualisieren dieses Zustands ist.

In unserem Fall benötigen wir 2 Statuswerte für die Verarbeitung von Benutzereingaben. Eine für die E-Mail-Adresse und eine für das Passwort. Lassen Sie uns diese mit einer leeren Zeichenfolge initiieren. 

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

Wir verwenden die Zustände und die Aktualisierungsfunktionen, um die Formulareingaben zu steuern. 

...
<input
  type="text" 
  value={email}
  onChange={(e) => setEmail(e.target.value)} 
/>
...
<input
  type="password" 
  value={password}
  onChange={(e) => setPassword(e.target.value)} 
/>
...

Die setEmail und das setPassword Funktionen werden verwendet, um jeden entsprechenden Zustand zu aktualisieren. Sie akzeptieren einen neuen Zustandswert und reihen ein erneutes Rendern der Komponente ein.

Wir haben jetzt eine kontrollierte Komponente, die mit einer einfachen Funktion und dem Hook React useState gebaut wurde. Wir können endlich eine Funktion erstellen, um die Formularübermittlung wie gewohnt zu handhaben. 

import React, { useState } from 'react';

export default const LoginForm = (props) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // Authenticate user
    ...
  };

  return (
    <div>
      <h1>Login Form</h1>
      <form onSubmit={handleSubmit}>
      ...
      </form>
    </div>
  );
}

Effekthaken - useEffect

Gute Frage. Wir haben keinen Zugriff auf die Methoden „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ in unseren Funktionskomponenten. Aber wir haben jetzt den Effect-Hook, useEffect . Dieser Haken ermöglicht es uns, "Nebenwirkungen" auszuführen aus einer Funktionskomponente. 

import React, { useEffect } from 'react';

Mit anderen Worten, hier kümmern wir uns um Dinge wie das Abrufen von Daten, das Einrichten von Abonnements oder die manuelle DOM-Manipulation. Der useEffect akzeptiert eine Funktion, die von React nach jedem Rendern ausgeführt wird. 

useEffect(() => {
  ...
})

Kommen wir zurück zu unserem Beispiel. Dank des useEffect Hook können wir den Fokus auf unser E-Mail-Eingabefeld setzen, wenn unsere Komponente rendert. Dazu benötigen wir auch eine Möglichkeit, auf den DOM-Knoten zuzugreifen. Und rate was? React hat dafür einen Hook, useRef . 

import React, { useRef } from 'react';

Ref-Hook - useRef

Sie haben Recht. Um auf einen DOM-Knoten in einer Klassenkomponente zuzugreifen, würden wir die React.createRef verwenden Methode. Diese Methode erstellt jedoch bei jedem Rendern immer eine neue Referenz. Um dies zu umgehen, würden wir die Referenz normalerweise in eine Instanzeneigenschaft innerhalb des Klassenkonstruktors einfügen. Aber wir haben diese Option nicht in einer Funktionskomponente.

Deshalb müssen wir die useRef verwenden Haken Sie einen Funktionsbaustein ein. Tatsächlich useRef gibt für die gesamte Lebensdauer der Komponente jedes Mal dieselbe Referenz zurück.

export default const LoginForm = (props) => {
  ...
  const emailEl = useRef(null);
  ...

  return (
    ...
    <input 
      ref={emailEl}
      type="text" 
      value={email}
      onChange={(e) => setEmail(e.target.value)} 
    />
    ...
  );

Nachdem wir nun Zugriff auf den DOM-Knoten unserer E-Mail-Eingabe haben, legen wir den Fokus darauf, indem wir den Effekt-Hook verwenden. 

useEffect(() => {
  emailEl.current.focus();
});

Effekte überspringen

Ich habe Ihnen bereits gesagt, dass React unsere Effektfunktion standardmäßig nach jedem Rendern ausführen wird. Dies ist bei unserer aktuellen Implementierung der Fall. Jedes Mal, wenn der Benutzer einen Wert in eines der Eingabefelder eingibt, wird der Status aktualisiert und die Komponente wird gerendert. Dann wird unsere Effektfunktion ausgeführt und der Fokus wieder auf die E-Mail-Eingabe gelegt. Das wollen wir nicht.

Glücklicherweise können wir dieses Verhalten anpassen, indem wir ein zweites Argument an useEffect übergeben Hook, ein Abhängigkeits-Array. In unserem Fall können wir ein leeres Array übergeben, um React mitzuteilen, dass es unsere Effektfunktion niemals erneut ausführen muss. 

useEffect(() => {
  emailEl.current.focus();
}, []);

Das ist es Leute! Wir haben ein Anmeldeformular, das nur mit einer funktionalen Komponente und React-Hooks erstellt wurde. Hier ist der vollständige Quellcode, falls Sie ihn brauchen:

import React, { useState, useEffect, useRef } from 'react';

export default const LoginForm = (props) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const emailEl = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Authenticate user
    ...
  };

  useEffect(() => {
    emailEl.current.focus();
  }, []);

  return (
    <div>
      <h1>Login Form</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email Address:
          <input 
            ref={emailEl}
            type="text" 
            value={email}
            onChange={(e) => setEmail(e.target.value)} 
          />
        </label>
        <label>
          Password:
          <input 
            type="password" 
            value={password} 
            onChange={(e) => setPassword(e.target.value)} 
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}