Wenn Ihnen der Artikel gefallen hat, können Sie einen Kaffee kaufen, um Buy me Coffee zu unterstützen

Komponenten rein halten

Einige JavaScript-Funktionen sollten rein sein. Reine Funktionen führen nur eine Berechnung durch und sonst nichts. Indem Sie Ihre Komponenten als reine Funktionen schreiben, können Sie alle verwirrenden Fehler und unvorhersehbaren Verhaltensweisen vermeiden, wenn Ihre Codebasis wächst. Sie können Ihre Komponenten einfacher verwalten.

Reinheit

Wie können wir also eine reine Funktion erstellen? Und welche Eigenschaften muss eine Funktion haben, damit sie rein ist? Eine reine Funktion sollte eine Funktion mit den folgenden Eigenschaften sein:

• Es kümmert sich um seine eigenen Angelegenheiten. Es verändert keine Objekte oder Variablen, die vor dem Aufruf existierten.

• Gleiche Eingabe, gleiche Ausgabe. Bei gleichen Eingaben sollte eine reine Funktion immer das gleiche Ergebnis zurückgeben. Es sollte keine unterschiedlichen Ergebnisse für dieselben Eingaben liefern.

Betrachten wir eine mathematische Formel: y = 2x

Wenn x = 2, y = 4. Diese Invariante ist immer das gleiche Ergebnis.

Wenn x = 3, y = 6. Diese Invariante ist immer das gleiche Ergebnis.

Wenn x = 3, ist y manchmal nicht 9, –1 oder 2,5, abhängig von einer anderen Situation.

Wenn y = 2x und x = 3, dann ist y immer 6.

Wenn wir daraus eine JavaScript-Funktion gemacht hätten:

function getDouble(number) {
  return 2 * number;
}

getDouble ist eine reine Funktion. Wenn Sie 3 übergeben, wird 6 zurückgegeben. Immer.

React basiert auf diesem Konzept. Dabei wird davon ausgegangen, dass sich jede Komponente wie eine reine Funktion verhält, was bedeutet, dass Ihre React-Komponenten bei gleichen Eingaben immer die gleiche JSX-Ausgabe zurückgeben sollten.

Lassen Sie uns eine reine Verbindung anhand von Beispielen erklären.

function Member({ user }) {
  return (
    
    
      
 register {user} 
    
  );
}

export default function App() {
  return (
    

      
      
    
  );
}

Es gibt immer den angegebenen Benutzerparameter zurück.Wie eine mathematische Formel

Abschluss

Eine Komponente muss rein sein, was bedeutet:

Es kümmert sich um seine eigenen Angelegenheiten. Es sollten keine Objekte oder Variablen geändert werden, die vor dem Rendern vorhanden waren.

Gleiche Eingaben, gleiche Ausgabe. Bei gleichen Eingaben sollte eine Komponente immer denselben JSX zurückgeben.