Reatc.js: Komponenten rein halten

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.

• Gleicher Input, gleicher Output. Bei gleichen Eingaben sollte eine reine Funktion immer das gleiche Ergebnis zurückgeben. Es sollte nicht zu unterschiedlichen Ergebnissen bei denselben Eingaben kommen.

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 machen würden:

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 denselben Eingaben immer die gleiche JSX-Ausgabe zurückgeben sollten.

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

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

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

Sie können sich Ihre Zutaten wie Rezepte vorstellen. Sie kennen die Zutaten, und wenn Sie während des Kochvorgangs keine neuen Zutaten hinzufügen, erhalten Sie am Ende jedes Mal das gleiche Gericht.

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 den gleichen JSX zurückgeben.

Das obige ist der detaillierte Inhalt vonReatc.js: Komponenten rein halten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!