Was ist der Unterschied zwischen reaktionskontrollierten Komponenten und unkontrollierten Komponenten?

Der Unterschied zwischen kontrollierten Komponenten und unkontrollierten Komponenten in React: 1. Kontrollierte Komponenten hängen vom Zustand ab, während unkontrollierte Komponenten nicht vom Zustand kontrolliert werden. 2. Kontrollierte Komponenten können nur einen Zustand haben, wenn sie „React.Component“ erben. Unkontrollierte Komponenten schon 3. Kontrollierte Komponenten werden im Allgemeinen verwendet, wenn Anfangswerte dynamisch festgelegt werden müssen, und unkontrollierte Komponenten werden im Allgemeinen verwendet, wenn keine dynamischen Anfangswertinformationen vorhanden sind.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Der Unterschied zwischen kontrollierten Komponenten und unkontrollierten Komponenten in React

Der Unterschied zwischen den beiden

1. Kontrollierte Komponenten

Kontrollierte Komponenten hängen vom Zustand ab

Änderungen kontrollierter Komponenten werden Zustandswerten zugeordnet in Echtzeit Zu diesem Zeitpunkt kann der Eingabeinhalt überprüft werden

Die kontrollierte Komponente kann nur dann einen Status haben, wenn sie React.Component erbt

Die kontrollierte Komponente muss das onChange-Ereignis im Formular verwenden, um das entsprechende Ereignis zu binden

2. Nicht kontrollierte Komponenten

Unkontrollierte Komponenten werden nicht vom Staat kontrolliert

Das Abrufen von Daten von unkontrollierten Komponenten entspricht dem Betrieb von DOM

Unkontrollierte Komponenten können problemlos mit Komponenten von Drittanbietern kombiniert werden und es ist einfacher, React und Non-React zu integrieren gleichzeitig Code

Wählen Sie kontrollierte oder unkontrollierte Komponenten

1. Kontrollierte Komponentenverwendungsszenarien: Wird im Allgemeinen in Situationen verwendet, in denen der Anfangswert dynamisch festgelegt werden muss. Beispiel: Beim Bearbeiten einiger Formularinformationen muss das Eingabeformularelement zunächst einen bestimmten vom Server zurückgegebenen Wert anzeigen und ihn dann bearbeiten.

2. Unkontrollierte Komponentennutzungsszenarien: Wird im Allgemeinen verwendet, wenn keine dynamischen Anfangswertinformationen vorliegen. Beispiel: Beim Erstellen von Informationen in einem Formular hat keines der Eingabeformularelemente Anfangswerte und erfordert eine Benutzereingabe.

Erweiterte Kenntnisse:

1. Kontrollierte Komponenten

In HTML basieren die Wertänderungen von Formularelement-Tags d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3, 221f08282418e2996498697df914ce4e usw. normalerweise auf Benutzereingaben . erneuern.

In React wird der veränderliche Status normalerweise in der Statuseigenschaft der Komponente gespeichert und kann nur mit setState() aktualisiert werden, und die React-Komponente, die das Formular rendert, steuert auch, was in diesem Formular bei nachfolgenden Benutzereingaben passiert Der Wert eines von React gesteuerten Eingabeformularelements wird als kontrollierte Komponente bezeichnet.

Binden Sie beispielsweise ein onChange-Ereignis an die Eingabe des Formularelements. Wenn sich der Eingabestatus ändert, wird das onChange-Ereignis ausgelöst und aktualisiert so den Status der Komponente.

import React, { Component } from 'react'
export default class MyInput extends Component{
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
  }
  handleChange = (event)=>{
    this.setState({
        value: event.target.value
    })
  }
  render(){
    return(
      <div>
          <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
           />
      </div>
    )
  }
}

Der Prozess der Aktualisierung des Status der kontrollierten Komponenten

1 Sie können den Standardwert des Formulars im Anfangszustand festlegen

2. Rufen Sie den onChange-Ereignishandler auf Der Ereignishandler übergibt das Ereignisobjektereignis und ruft den geänderten Status ab und aktualisiert den Status der Komponente.

4 Sobald der Status über die setState-Methode aktualisiert wird, wird das erneute Rendern der Ansicht ausgelöst und die Aktualisierung der Formularkomponente abgeschlossen

In React fließen Daten in einem einzelnen Element. Im Beispiel können Sie sehen, dass die Formulardaten aus dem Status der Komponente stammen und über Requisiten übergeben werden. Anschließend werden die neuen Daten über den onChange-Ereignishandler in den Status zurückgeschrieben, wodurch die bidirektionale Datenbindung abgeschlossen wird.

2. Unkontrollierte Komponenten

Unkontrollierte Komponenten beziehen sich auf die Formulardaten, die vom DOM selbst verarbeitet werden. Das heißt, es wird nicht von setState() gesteuert. Es ähnelt der herkömmlichen HTML-Formulareingabe. Der Eingabewert zeigt den neuesten Wert an.

In unkontrollierten Komponenten können Sie einen Verweis verwenden, um den Formularwert aus dem DOM abzurufen.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    console.log('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Unkontrollierte Komponenten behalten während der zugrunde liegenden Implementierung intern ihren eigenen Zustand bei, sodass jede vom Benutzer eingegebene Wert auf dem Element widergespiegelt werden kann.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

, Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen reaktionskontrollierten Komponenten und unkontrollierten Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!