Das haben wir alle schon erlebt. Sie öffnen eine React-Komponente, die Sie vor ein paar Monaten geschrieben haben, und es kommt Ihnen vor, als würden Sie sich Code ansehen, der von jemandem geschrieben wurde, der es eilig hatte – was wahrscheinlich der Fall war. Die Fristen rückten näher und Funktionen mussten geliefert werden. Spulen wir heute vor und es ist Zeit, diese chaotische Komponente umzugestalten.

Also, hier ist, wie ich es angegangen bin.

Der anfängliche Horror

Das erste, was mir auffiel, war, dass das Bauteil viel zu groß geworden war. Es wurde versucht, alles zu tun, wie den Status zu verwalten, API-Aufrufe durchzuführen, komplexe UI-Logik zu verwalten und sogar Stile direkt anzuwenden. Es handelte sich um eine einzelne Datei mit über 540 Zeilen, und beim Durchlesen fühlte es sich an, als würde man sich in einem Dschungel ohne Karte wundern.

Der erste Schritt bestand darin, die Realität zu akzeptieren: Dieser Code war nicht mehr wartbar. Wenn ich, die Person, die es geschrieben hat, dem Geschehen kaum folgen könnte, hätte jemand anderes keine Chance. Also beschloss ich, es aufzuschlüsseln.

Aufschlüsseln

Ich begann damit, die unterschiedlichen Verantwortlichkeiten der Komponente zu identifizieren. Es gab drei klare Bereiche:

1. Statusverwaltung: Die Handhabung des Komponentenstatus war mit der UI-Logik verknüpft.

2. API-Aufrufe: Daten abrufen und Ladezustände verwalten.

3. Rendering-Benutzeroberfläche: Anzeige der Daten in einer etwas komplexen UI-Struktur.
   Jede dieser Verantwortlichkeiten musste getrennt werden.

Extrahieren von Hooks für Status- und API-Logik

Das erste, was ich tat, war, die Statusverwaltung und die API-Logik in benutzerdefinierte Hooks zu extrahieren. Dadurch wurde nicht nur die Komponente bereinigt, sondern es wurde auch einfacher, die Logik an anderer Stelle zu testen und wiederzuverwenden.

Hier wird ein Code erwähnt (nicht der Originalcode):

function useDataFetching(apiEndpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch(apiEndpoint);
        let result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [apiEndpoint]);

  return { data, loading, error };
}

Mit useDataFetching habe ich die API-Aufruflogik herausgezogen und die Lade- und Fehlerzustände behandelt. Jetzt muss die Komponente nur noch diesen Hook aufrufen und die erforderlichen Daten sauber und einfach abrufen.

Vereinfachung der UI-Logik
Als nächstes habe ich mir die Rendering-Logik angesehen. Zuvor habe ich die Renderfunktion auf Ladevorgänge, Fehler und Daten überprüft, was es ziemlich schwierig machte, ihnen zu folgen. Ich habe diese Logik in kleine, in sich geschlossene Funktionen aufgeteilt, etwa so (natürlich nicht das Original ;)

function renderLoading() {
  return 
Loading...
;
}

function renderError(error) {
  return 
Error: {error.message}
;
}

function renderData(data) {
  return 
{/* Complex UI logic here */}
;
}
//After that, component is ni much pretty shape

function MyComponent() {
  const { data, loading, error } = useDataFetching('/api/data-endpoint');

  if (loading) return renderLoading();
  if (error) return renderError(error);
  if (data) return renderData(data);

  return null;
}

Abschlussgespräch

Nachdem die Komponente zerlegt wurde, wuchs die Datei von über 540 Zeilen auf knapp 124, mit einer Logik, die viel einfacher zu befolgen ist. Die Komponente macht jetzt eines: die Benutzeroberfläche rendern. Alles andere wurde auf benutzerdefinierte Hooks und Dienstprogrammfunktionen verlagert.

Diese Erfahrung hat für mich einige wichtige Lektionen bestätigt:

• Keine Angst vor Refactoring: Es ist leicht, unordentlichen Code so zu belassen, wie er ist, insbesondere wenn er funktioniert. Aber wenn Sie sich die Zeit nehmen, alles aufzuräumen, wird Ihr Leben – und das Ihres zukünftigen Ichs – so viel einfacher.

• Trennung von Bedenken: Durch die Beibehaltung verschiedener Bedenken an verschiedenen Stellen (Status, API, UI) wurde der Code modularer, wiederverwendbarer und testbarer.

• Keep It Simple: Durch die Vereinfachung der Renderfunktion durch Auslagern der Logik auf kleinere Funktionen wurde die Komponente viel besser lesbar.

Wenn Sie also eine unordentliche Komponente herumliegen haben, zögern Sie nicht, sie umzugestalten. Es geht nicht nur um sauberen Code – es geht darum, Ihnen das Leben als Entwickler zu erleichtern. Und wer möchte das nicht?