Erläuterung unveränderlicher Werte in React

Was sind unveränderliche Werte?

Funktionale Programmierung bedeutet, dass die Funktionen und Ausdrücke im Programm wie Funktionen in der Mathematik sein können. Bei gegebenem Eingabewert ist die Ausgabe sicher. Zum Beispiel

sei a = 1;
sei b = a + 1;
=> a = 1 b = 2;

Die Variable b erscheint, und obwohl der Wert der Variable a verwendet wird, wird der Wert von a nicht geändert.

Schauen wir uns den Code in React an, mit dem wir vertraut sind. Wenn wir this.state = { count: 1 } initialisieren

componentDidMount() {
    const newState = { ...Zustand, Anzahl: 2 }; // { Anzahl: 2 }
    dies.setState(newState);
}

Obwohl wir this.state verwendet haben, haben wir weder die Referenzadresse this.state geändert noch den Wert von count direkt geändert. Dasselbe gilt für this.props.

Warum unveränderliche Werte verwenden?

Die offizielle Website von React bietet drei Vorteile:

• Vereinfachen Sie komplexe Funktionen

Durch Unveränderlichkeit lassen sich komplexe Funktionen einfacher implementieren.

• Nachverfolgen von Datenänderungen

Wenn Sie die Daten direkt ändern, ist es schwierig, die Änderungen zu verfolgen. Die Verfolgung von Datenänderungen erfordert, dass veränderbare Objekte mit den Versionen vor der Änderung verglichen werden können, sodass der gesamte Objektbaum einmal durchlaufen werden muss.

Das Verfolgen von Änderungen an unveränderlichen Daten ist relativ einfach. Wenn wir feststellen, dass das Objekt zu einem neuen Objekt geworden ist, können wir sagen, dass das Objekt sich verändert hat.

• Festlegen, wann in React erneut gerendert werden soll

Der Hauptvorteil der Unveränderlichkeit besteht darin, dass sie uns hilft, reine Komponenten in React zu erstellen. Wir können leicht feststellen, ob sich unveränderliche Daten geändert haben und somit wissen, wann eine Komponente neu gerendert werden muss.

Die Optimierung der Reaktionsleistung ist untrennbar mit unveränderlichen Werten verbunden

• Zunächst einmal wissen wir alle, dass die Hook-Funktion shouldComponentUpdate standardmäßig „true“ zurückgibt, d. h., solange die übergeordnete Komponente aktualisiert wird, muss auch die untergeordnete Komponente aktualisiert werden.
• shouldComponentUdpate kann zwei Parameter empfangen, nextProps und nextState. Wenn wir feststellen, dass this.props.xxx gleich nextProps.xxx und this.state.xxx gleich nextState.xxx ist, können wir den Rückgabewert auf false setzen, was bedeutet, dass die Unterkomponente dieses Mal nicht aktualisiert werden muss.

Klasse CounterButton erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {Anzahl: 1};
  }

  sollteComponentUpdate(nextProps, nextState) {
    wenn (diese.props.color !== nextProps.color) {
      gibt true zurück;
    }
    wenn (dieser.Zustand.Anzahl !== nächsterZustand.Anzahl) {
      gibt true zurück;
    }
    gibt false zurück;
  }

  rendern() {
    zurückkehren (
      <Schaltfläche
        Farbe = {this.props.color}
        bei Klick={() => this.setState(state => ({Anzahl: state.count + 1}))}>
        Anzahl: {this.state.count}
      </button>
    );
  }
}

• React v15.3 fügt eine neue PureComponent-Klasse hinzu, die oberflächliche Vergleiche an Props und Status durchführen kann, um die Anzahl der Ausführungen der Renderfunktion zu reduzieren, unnötiges Komponenten-Rendering zu vermeiden und eine Leistungsoptimierung zu erreichen.
• Was ist das Prinzip von PureComponent?

Wir wissen, dass die Variablentypen in JS in Basistypen (Zahl, Zeichenfolge, Boolescher Wert, undefiniert, Null, Symbol) und Referenztypen (Funktion, Objekt, Funktion) unterteilt sind. Die Werte der Basistypen werden im Stapelspeicher gespeichert, und die Werte der Referenztypen werden im Heapspeicher gespeichert. Der Stapelspeicher speichert nur Verweise auf den Heapspeicher. Beim oberflächlichen Vergleich werden nur die Daten im Stapelspeicher verglichen.

Klasse App erweitert PureComponent {
  Zustand = {
    Elemente: [1, 2, 3]
  }
  handleKlick = () => {
    const { items } = dieser.Zustand;
    Elemente.pop();
    this.setState({ Elemente });
  }
  rendern() {
    zurückkehren (
        <div>
            <ul>
                {this.state.items.map(i => <li key={i}>{i}</li>)}
            </ul>
            <button onClick={this.handleClick}>löschen</button>
        </div>
    )
  }
}

Das obige Beispiel verwendet PureComponent und ändert nur den Wert im Elementarray, ohne die Referenzadresse der Elemente zu ändern. Daher wird davon ausgegangen, dass sich die Elemente nicht geändert haben und die Renderfunktion nicht ausgelöst wird und das Rendern der Komponente nicht ausgelöst wird.

Wenn Sie Komponentenaktualisierungen durchführen möchten, können Sie wie folgt ein neues Array erstellen und den Elementen die Adresse des neuen Arrays zuweisen.

handleKlick = () => {
    const { items } = dieser.Zustand;
    Elemente.pop();
    var neuesItem = [...Items];
    this.setState({ item: neuesElement });
}

• PureComponent hilft uns bei einem oberflächlichen Vergleich, daher sollten wir so viel wie möglich auf den Status achten. Wenn wir verschachtelte Referenzen in der Datenstruktur referenzieren müssen, können wir Immutable.js verwenden.
• Was ist unveränderlich

(1) Unveränderlich sind Daten, die nach ihrer Erstellung nicht mehr geändert werden können. (2) Jede Änderung, Hinzufügung oder Löschung eines unveränderlichen Objekts gibt ein neues unveränderliches Objekt zurück. (3) Das Prinzip der unveränderlichen Implementierung ist eine persistente Datenstruktur. Das heißt, wenn durch permanente Daten neue Daten erstellt werden, muss sichergestellt werden, dass die alten Daten verfügbar und gleichzeitig unverändert bleiben. (4) Um gleichzeitig den Leistungsverlust zu vermeiden, der durch das Kopieren aller Knoten durch DeepCopy entsteht, verwendet Immutable die strukturelle Freigabe, d. h. wenn sich der Knoten des Objektbaums ändert, werden nur der Knoten und der davon betroffene übergeordnete Knoten geändert, während die anderen Knoten freigegeben werden.

Wenn Sie schließlich einen oberflächlichen Vergleich auf Komponentenebene durchführen möchten, können Sie die Funktion React.memo() verwenden.

Zusammenfassen

Tatsächlich besteht der dritte und wichtigste Vorteil der Unveränderlichkeit, der auf der offiziellen Website erwähnt wird, darin, dass die Unveränderlichkeit uns helfen kann, PureComponent in React zu verwenden. Wir können leicht feststellen, ob sich Daten geändert haben und wann eine Komponente neu gerendert werden muss.

Wenn wir den Wert von state ändern und shouldComponentUpdate den aktuellen state und nextState abruft oder die von props und nextProps verglichenen Werte genau gleich sind, wird false zurückgegeben. Selbst wenn wir eine setState-Operation ausführen, wird die Benutzeroberfläche nicht aktualisiert.

Zur Leistungsoptimierung wird PureComponent am besten mit Immutable.js verwendet.

Kombiniert mit React.memo, um unnötige Komponentenaktualisierungen und Renderings zu vermeiden.

Oben finden Sie eine ausführliche Erläuterung der unveränderlichen Werte in React. Weitere Informationen zu unveränderlichen Werten in React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!