Wenn Sie schon eine Weile mit React arbeiten, sind Sie wahrscheinlich darauf gestoßen Container und Präsentationskomponenten , oder intelligente und dumme Komponenten. Diese Begriffe beschreiben a Anleitungen das die UI-Schicht der React-Komponenten von der Logik trennt.
Die Trennung der Benutzeroberfläche von der Geschäftslogik ist nichts Einzigartiges von React: Die Trennung von Bedenken ist ein Designprinzip, das es gibt schon in den 70er Jahren. Beispielsweise ist es üblich, den Code, der auf die Datenbank zugreift, von der Geschäftslogik im Backend zu trennen.
In React haben wir dieses Problem also gelöst, indem wir Containerkomponenten erstellt haben, die die gesamte Logik enthalten, die dann die Daten über Requisiten an die Präsentationskomponente weitergibt.
Mit der Einführung von React-Hooks gibt es dafür einen neuen Ansatz: die Verwendung benutzerdefinierte Haken.
Warum sollten wir die Logik von der Komponente trennen?
Bevor wir anfangen, die Logik von unseren React-Komponenten zu entkoppeln, sollten wir wissen, warum.
Unseren Code so zu organisieren, dass jede Funktion oder Komponente nur für eine Sache verantwortlich ist, hat den Vorteil, dass es viel ist einfacher zu ändern und zu warten (Dave und Andrew nennen das „Orthogonalität“ in ihrem Buch Der Pragmatische Programmierer).
Wenn Sie dies auf React anwenden, sieht unsere Komponente sauberer und organisierter aus. Wir müssen beispielsweise nicht an der Logikmauer vorbeiscrollen, bevor wir die Benutzeroberfläche bearbeiten.
Wenn Sie Ihren Code so organisieren, sieht er nicht nur besser aus und ist einfacher zu navigieren, sondern erleichtert auch das Ändern, da das Ändern des Hooks die Benutzeroberfläche nicht beeinflusst und umgekehrt.
Das Testen ist auch leichter zugänglich: Wir können die Logik separat von der Benutzeroberfläche testen, wenn wir möchten. Der bedeutendste Vorteil für mich ist jedoch, wie dieser Ansatz meinen Code organisiert.
Wie man Logik mit React-Hooks entkoppelt
Um die Logik von unserer Komponente zu entkoppeln, erstellen wir zunächst einen benutzerdefinierten Hook.
Nehmen wir diese Komponente als Beispiel. Es berechnet den Exponentialwert der Basiszahl und den Exponenten:
Sie finden den vollständigen Quellcode hier.
Der Code sieht wie folgt aus:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Das sieht vielleicht schon gut aus, aber nur für dieses Tutorial Bild dass hier mehr Logik steckt.
Als ersten Schritt werden wir Verschieben Sie die Logik in einen benutzerdefinierten Hook und rufen Sie es in unserer Komponente auf.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Wir könnten diesen Haken nach a verschieben separate Datei für eine deutlichere Trennung der Anliegen.
Darüber hinaus können wir unseren Hook weiter in kleinere, wiederverwendbare Funktionen unterteilen. In diesem Fall können wir nur extrahieren calculateExponent.
useExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Das Testen dieser Funktionen ist viel einfacher als das Testen des gesamten Komponentencodes aus dem ersten Beispiel. Wir könnten sie mit jeder Node.js-Testbibliothek testen, die nicht einmal React-Komponenten unterstützen muss.
Wir haben jetzt unseren Framework-spezifischen Code (React) im Code für die Komponente und den Hook, während unsere Geschäftslogik in den verschiedenen Funktionen lebt, die wir später definiert haben (die Framework-agnostisch sind).
Best Practices
Benennung
Ich benenne meine benutzerdefinierten Hooks gerne nach der Komponente als Verkettung von use und der Name der Komponente (zB useExponentCalculator). Ich rufe dann die an Datei gleich als Haken.
Vielleicht möchten Sie einer anderen Namenskonvention folgen, aber ich empfehle konsequent bleiben in Ihrem Projekt.
Wenn ich Teile eines benutzerdefinierten Hooks wiederverwenden kann, verschiebe ich ihn normalerweise in eine andere Datei unter src/hooks.
Übertreibe es nicht
Versuchen Sie, pragmatisch zu sein. Wenn eine Komponente nur wenige JS-Zeilen hat, ist es nicht notwendig, die Logik zu trennen.
CSS-in-JS
Wenn Sie eine CSS-in-JS-Bibliothek verwenden (useStyles), möchten Sie diesen Code möglicherweise auch in eine andere Datei verschieben.
Sie könnten es in dieselbe Datei wie den Hook verschieben. Ich ziehe es jedoch vor, es entweder über der Komponente in derselben Datei zu belassen oder es in eine eigene Datei zu verschieben, wenn es zu groß wird.
Zusammenfassung
Ob Sie der Meinung sind, dass die Verwendung benutzerdefinierter Hooks Ihren Code verbessert oder nicht, am Ende hängt es von Ihren persönlichen Vorlieben ab. Wenn Ihre Codebasis nicht viel Logik enthält, werden die Vorteile dieses Musters für Sie nicht so relevant sein.
Benutzerdefinierte Haken sind nur eine Möglichkeit, die Modularität zu erhöhen. Kann ich auch sehr empfehlen Aufteilen von Komponenten und Funktionen in kleinere, wiederverwendbare Teile wenn möglich.
Das Thema wird auch auf einer allgemeineren Ebene in behandelt Der Pragmatische Programmierer. Ich habe einen Artikel geschrieben, der meine Lieblingsthemen des Buches abdeckt. Wenn Sie das also interessiert, stellen Sie sicher, dass Sie es tun Schau dir das an.
