Erstellen Sie eine Chat -App mit React -Hooks in 100 Codezeilen

Dieses Tutorial zeigt die Leistung von React -Hooks, indem eine funktionale Chat -Anwendung in überraschend prägnantem Code erstellt wird. Frühere Artikel haben React Hooks eingeführt und ihre Fähigkeit zur Erstellung von Komponenten mithilfe von Funktionen vorgestellt. In diesem Tutorial wird weiter veranschaulicht, wie Hooks die Entwicklung vereinfachen und die Kesselplatte reduzieren.

Wir nutzen mehrere React-Hooks, einschließlich einiger Open-Source-Optionen, um den Prozess zu optimieren und Funktionen effizient zu erstellen. Diese vorgefertigten Haken halten sich an etablierte Standards und verbessern die Sicherheit und die Wartbarkeit von Code.

Projektanforderungen

Unsere Chat -Anwendung wird enthalten:

• Abrufen früherer Nachrichten von einem Server.
• Gruppen -Chatraumfunktionalität.
• Echtzeit-Updates für Benutzerverbindungen und Unterbrechungen.
• Senden und Empfangen von Nachrichten.

Annahmen:

• Der Server wird als schwarze Box behandelt und kommuniziert über einfache Steckdosen.
• Das Styling wird von einer einzelnen CSS -Datei (im verknüpften Repository verfügbar) behandelt.

Einrichtung der Entwicklungsumgebung

Dieses Projekt erfordert node.js und npm (Knotenpaketmanager). Installieren Sie sie bei Bedarf. Erstellen Sie dann das React -Projekt mithilfe von Create React App:

 NPX erstellen React-App Socket-Client
CD Socket-Client
NPM Start

Navigieren Sie zu http://localhost:3000 um die Standard -Begrüßungsseite zu sehen. Wir werden das Tutorial um die verwendeten Haken strukturieren.

useState Haken

Der useState Hook verwaltet den Komponentenzustand. Anstatt this.state in einer Klassenkomponente zu verwenden, verwenden wir useState , um persistente Daten wie den Benutzernamen zu speichern. Aktualisierungen, um die Variablen zu useState die die Komponente automatisch neu rendern.

Den Haken importieren:

 reag import, {usestate} aus 'react';

Eine einfache Komponente wird "Hallo" angezeigt, wenn sie angemeldet sind, oder ein Anmeldeformular ansonsten basierend auf der id -Variablen:

 // app.js
reag import, {usestate} aus 'react';
import './index.css';

exportieren Sie default () => {
  const [id, setId] = usustate ("");
  const [nameInput, setNameInput] = usustate ("");
  const [Raum, setroom] = usestate ("");

  const handlesubmit = e => {
    E.PreventDefault ();
    if (! nameInput) {
      Return Alert ("Name kann nicht leer sein");
    }
    setID (nameInput); // korrigiert: Verwenden Sie NameInput anstelle des Namens
    Socket.Emit ("Join", NameInput, Raum); // korrigiert: Verwenden Sie NameInput anstelle des Namens
  };

  // ... (Rest der Komponente)
};

Dies zeigt useState für die Verwaltung des Anmeldestatus.

useSocket -Haken

Die Open-Source useSocket Haken verwaltet die Serververbindung mithilfe der Socket.io-Bibliothek. Dies bietet einen überschaubaren Ansatz für WebSocket -Verbindungen im Vergleich zu den globalen Erklärungen des Standard -Socket.io -Clients.

Installieren Sie den Haken:

 NPM Usesocket.io-Client hinzufügen

Grundnutzung:

 const [Socket] = useSocket ('Socket-URL');

Importieren und initialisieren:

 Import uSocket von 'usesocket.io-Client';
const [Socket] = useSocket ('<your-socket-url> ');
socket.connect ();
console.log (Socket);</your-socket-url>

Überprüfen Sie die Browserkonsole auf die Verbindung.

useImmer Haken

Der useImmer -Haken vereinfacht das unveränderliche Zustandsmanagement für Arrays und Objekte. Es verhindert eine direkte Mutation des ursprünglichen Zustands. Dies ist entscheidend für die Verwaltung von Listen von Online -Benutzern und Nachrichten.

Installieren Sie den Haken:

 NPM UMS-Immer hinzufügen

Grundnutzung:

 const [data, setData] = useImmer (StandardValue);

setData erstellt einen Entwurf für eine sichere Manipulation, die sicherstellt, dass der ursprüngliche Zustand intakt bleibt.

 setData (draf => {
  Draft.push (NewItem);
});

useEffect

Der integrierte useEffect Hook führt nach dem Rendering Code aus. Wir werden es verwenden, um Socket -Hörer zu behandeln und redundante Nachrichtenanzeigen zu vermeiden.

Import:

 reag importieren, {usestate, useEffect} aus 'react';

Eine Messages macht Nachrichten und Aktualisierungen:

 const messages = props => props.data.map (m => (
  M [0]! == ''?<div> {m [0]}: {m [1]}</div> :<div classname="innermsg"> {m [1]}</div>
));

Die Socket -Logik in useEffect verhindert die Wiederholung der wiederholten Nachrichten:

 useEffect (() => {
  Socket.on ('update', message => setMessages (draf => {
    entworfen.push (['', message]);
  }));
  // ... andere Socket -Hörer
}, []);

Eine "Join" -Meldung löst weitere Zuhörer aus.

Endguthaut und komplette Code

Die letzte App erfordert:

• Eine Online -Komponente zum Anzeigen von Online -Benutzern.
• Ein useImmer und Socket -Listener für Online -Benutzer.
• Ein Meldung Einreichungshandler.

Die vollständige App.js ist zu umfangreich, um hier einzuschließen. Der vollständige Code ist jedoch auf GitHub verfügbar (Link im Originalartikel).

Dieses Tutorial zeigt die Effizienz von React -Hooks zum Erstellen komplexer Anwendungen mit minimalem Code. Das Beispiel zeigt eine funktionale Chat -Anwendung, die Prinzipien können jedoch auf eine Vielzahl von Projekten angewendet werden.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Chat -App mit React -Hooks in 100 Codezeilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!