Zephyrnet-Logo

So trennen Sie Logik von der Benutzeroberfläche mit React-Komponenten | von Esmat Ibrahim | Codementor

Datum:

Die Trennung von Logik und Benutzeroberfläche erleichtert das Schreiben und Testen von Komponenten.
Das Hauptziel dieses Artikels besteht darin, sicherzustellen, dass wir unsere neuen Komponenten so schreiben, dass sich jede Komponente nur um ihre Daten, Fehlerbehandlung, das Laden und jede andere erforderliche Logik kümmert (wir werden den Datenaustausch zwischen Komponenten in einem anderen Artikel besprechen). ).

Warum ist das wichtig?

  • Skalierbarkeit: Es ist tatsächlich hoch skalierbar.
  • Entfernbarkeit: Das Löschen einer Komponente sollte nach heute kein Problem mehr sein, es treten keine wichtigen Änderungen oder Rückschritte auf.
  • Beweglichkeit: Die Möglichkeit, die Komponente überall und möglicherweise projektübergreifend zu verwenden, die dieselbe API verwenden.

Hands-On

Lassen Sie uns in den Code eintauchen und zwei Beispiele vor und nach dem Refactoring zeigen.

Nehmen wir das folgende Beispiel und versuchen zu verstehen, wie wir es umsetzen können:

import React, { useMemo } from 'react';
import useAxios from 'axios-hooks'; const TodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;

Wie Sie oben sehen können, haben wir ein einfaches Beispiel für die Implementierung der To-Do-Liste durch Anfordern der Daten über eine Remote-API-Konfiguration mit axios.

Ist Ihnen die einfache Berechnung zum Extrahieren der Elemente mit dem Status = TODO aufgefallen? Wenn Sie mit „Ja“ antworten, sind wir auf derselben Seite.

Wie wir am Anfang des Artikels erklärt haben, besteht unsere Mission darin, die Logik von der Benutzeroberfläche zu isolieren, aber im obigen Beispiel haben wir Logik in derselben JS-Datei. Schauen wir uns an, was getan werden sollte, um unsere Mission zu erreichen.

Daher müssen wir zunächst die Logik aus der Komponente herausnehmen.

import { useMemo } from 'react';
import useAxios from 'axios-hooks'; const useTodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); return [{ data, loading, error, todoItems }];
}; export default useTodoList;

Wie Sie sehen, haben wir es „useTodoList“ genannt. Dieser Hook sollte die Logik der TodoList-Komponente enthalten.

Sie können feststellen, dass die Datei keine Benutzeroberfläche enthält. Dies ist ein benutzerdefinierter Hook.

Doch wie soll die Hauptkomponente „TodoList“ aussehen?

import React from 'react'; import useTodoList from './useTodoList'; const TodoList = () => { const [{ data, loading, error, todoItems }] = useTodoList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;

Ganz einfach, ha? Genau aus diesem Grund ist es wichtig, Komponenten zu erstellen, bei denen die Geschäftslogik nicht Teil der Benutzeroberfläche ist, und den benutzerdefinierten Hook als API für Ihre Komponente zu verwenden.

Wie sieht es mit der Kommunikation zwischen Komponenten aus, wenn jede Komponente im Standalone-Modus arbeitet? Dies wird das interessante Thema sein, das wir im nächsten Artikel behandeln werden.

spot_img

Neueste Intelligenz

spot_img