Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React

Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React

Unkontrollierte Komponenten

Die Formulardaten werden vom DOM selbst verarbeitet. Das heißt, es wird nicht von setState() gesteuert und ähnelt der herkömmlichen HTML-Formulareingabe. Der Eingabewert zeigt den neuesten Wert (unter Verwendung von ref, um den Formularwert vom DOM abzurufen).

1. Unkontrollierte Komponenten

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<!--Bereiten Sie einen Behälter vor-->
<div id="test"></div>

<!--React-Kernbibliothek vorstellen-->
<script src="../js/react.development.js"></script>
<!--Führen Sie react-dom ein, um die React-Operation dom zu unterstützen-->
<script src="../js/react-dom.development.js"></script>
<!--Führen Sie Babel ein, um jsx in js zu konvertieren-->
<script src="../js/babel.min.js"></script>
<!--Führen Sie Prop-Typen ein, um die Tag-Eigenschaften von Komponenten einzuschränken-->
<script src="../js/prop-types.js"></script>

<Skripttyp="text/babel">
    Klasse Login erweitert React.Component {
        meinRef1 = React.createRef();
        myRef2 = React.createRef();
        handleSubmit = (Ereignis) => {
            event.preventDefault() // Formularübermittlung verhindern const username = this.myRef1.current
            const Passwort = this.myRef2.current
            alert(`Der von Ihnen eingegebene Benutzername lautet: ${username.value}, das von Ihnen eingegebene Passwort lautet: ${password.value}`)
        }
        rendern() {
            zurückkehren (
                <form onSubmit={this.handleSubmit}>
                    Benutzername: <input ref={this.myRef1} type="text"/> &nbsp;
                    Passwort: <input ref={this.myRef2} type="text"/> &nbsp;
                    <button>Anmelden</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Anmelden/>,document.getElementById('test'))
</Skript>
</body>
</html>

Kontrollierte Komponenten

In HTML werden die Werte der Tags <input>, <textarea> und <select> normalerweise basierend auf der Benutzereingabe aktualisiert. In React wird der veränderbare Status normalerweise in der Statuseigenschaft einer Komponente gespeichert und kann nur mit setState() aktualisiert werden. Die React-Komponente, die das Formular rendert, steuert auch, was mit diesem Formular bei nachfolgenden Benutzereingaben geschieht. Auf diese Weise ändern von React gesteuerte Eingabeformularelemente ihre Werte, was als „gesteuerte Komponente“ bezeichnet wird.

2. Kontrollierte Komponenten (kontrolliert)

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<!--Bereiten Sie einen Behälter vor-->
<div id="test"></div>

<!--React-Kernbibliothek vorstellen-->
<script src="../js/react.development.js"></script>
<!--Führen Sie react-dom ein, um die React-Operation dom zu unterstützen-->
<script src="../js/react-dom.development.js"></script>
<!--Führen Sie Babel ein, um jsx in js zu konvertieren-->
<script src="../js/babel.min.js"></script>
<!--Führen Sie Prop-Typen ein, um die Tag-Eigenschaften von Komponenten einzuschränken-->
<script src="../js/prop-types.js"></script>

<Skripttyp="text/babel">
    Klasse Login erweitert React.Component {
        // Status initialisieren state = {
            Benutzername: '',
            Passwort: ''
        }

        // Benutzernamen im Status speichern saveUsername = (e) => {
            this.setState({Benutzername: e.target.value})
        }

        //Speichere das Passwort im Status savePassword = (e) => {
            this.setState({Passwort: e.Zielwert})
        }

        handleSubmit = (e) => {
            e.preventDefault() // Formularübermittlung verhindern const {username,password} = this.state
            alert(`Der von Ihnen eingegebene Benutzername lautet: ${username}, das von Ihnen eingegebene Passwort lautet: ${password}`)
        }
        rendern() {
            // onChange Änderungen return (
                <form onSubmit={this.handleSubmit}>
                    Benutzername: <input onChange={this.saveUsername} type="text"/> &nbsp;
                    Passwort: <input onChange={this.savePassword} type="text"/> &nbsp;
                    <button>Anmelden</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Anmelden/>,document.getElementById('test'))
</Skript>
</body>
</html>

Bildbeschreibung hier einfügen

Beachten

Im Allgemeinen werden kontrollierte Komponenten häufiger verwendet, da ref in unkontrollierten Komponenten mehrfach verwendet wird und in der offiziellen Dokumentation steht: „Verwenden Sie ref nicht zu häufig.“ Eine zu häufige Verwendung führt zu Effizienzproblemen.

abschließend

Sowohl kontrollierte als auch unkontrollierte Elemente haben ihre Vorteile und die Wahl hängt von der jeweiligen Situation ab. Wenn das Formular im Hinblick auf das UI-Feedback sehr einfach ist, ist es völlig in Ordnung, den Verweis zu steuern, d. h. eine unkontrollierte Komponente zu verwenden.

Besonderheit Unkontrolliert kontrolliert
Einmaliger Abruf (z.B. Formularabsendung) Ja Ja
Zeitnahe Überprüfung NEIN Ja
Bedingtes Deaktivieren der Schaltfläche „Senden“ NEIN Ja
Eingabeformat ausführen NEIN Ja
Mehrere Eingänge für einen Datensatz NEIN Ja
Dynamische Eingabe NEIN Ja

Oben finden Sie eine kurze Analyse der Details zu kontrollierten und unkontrollierten Komponenten in React. Weitere Informationen zu kontrollierten und unkontrollierten Komponenten in React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Eine kurze Diskussion über reaktionsgesteuerte und ungesteuerte Komponenten (Zusammenfassung)
  • Eine kurze Diskussion über kontrollierte und unkontrollierte Komponenten in der tiefen Programmierung von React
  • Beispielanalyse für lerngesteuerte Komponenten und Datenfreigabe von React
  • React verwendet Hooks, um die Zustandsbindung gesteuerter Komponenten zu vereinfachen

<<:  Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)

>>:  Beispielskript für inkrementelle MySQL-Sicherungs- und Breakpoint-Wiederherstellung

Artikel empfehlen

Was ist HTML?

Geschichte der HTML-Entwicklung: HTML steht im En...

MySQL-Trigger-Verwendungsszenarien und Methodenbeispiele

auslösen: Trigger-Verwendungsszenarien und entspr...

Lösen Sie das Problem verschwindender Docker-Images

1. Spiegelbilder verschwinden in 50 und 93 [root@...

Konfigurationscodebeispiel für Nginx-Forward- und Reverse-Proxy sowie Lastausgleichsfunktionen

In diesem Artikel werden hauptsächlich die Konfig...

Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)

Von: https://blog.csdn.net/qq_44761243/article/de...

Detaillierte Erläuterung von 5 Lösungen für das adaptive CSS-Layout für Fortgeschrittene

Vorwort Beim Erstellen einer Seite stoßen wir häu...

Tipps, um zu verhindern, dass andere meine Seite als meine Webseite speichern und kopieren

Heutzutage ist das Kopieren von Websites im Intern...

Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)

Inhaltsverzeichnis JS liest Datei FileReader doku...

So verwenden Sie Axios-Anfragen im Vue-Projekt

Inhaltsverzeichnis 1. Installation 2. Es gibt kei...

Schritte zum Ändern des MySQL-Datenbankdatendateipfads unter Linux

Nach der Installation der MySQL-Datenbank mit der...

So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux

Auf Unix-ähnlichen Systemen wissen Sie möglicherw...

Detailliertes Tutorial zum Erstellen eines Gitlab-Servers auf CentOS8.1

Über den Unterschied zwischen Gitlab und Github m...

Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

Viele Tabellen in MySQL enthalten Spalten, die NU...

Zusammenfassung des in JS implementierten Minesweeping-Projekts

Dieser Artikel enthält die Zusammenfassung des JS...

Natives JS zum Erzielen digitaler Tisch-Spezialeffekte

Dieser Artikel beschreibt einen Digitaluhreffekt,...