In React ist eine unkontrollierte Komponente eine Komponente, die nicht von ihrer übergeordneten Komponente gesteuert wird. Eine unkontrollierte Komponente ist eine unabhängige Komponente, die keinen Wert übergeben muss und beim Kapseln keine Schnittmenge mit der übergeordneten Komponente aufweist Eine Komponente, nur wenn die aktuelle Komponente nur zu Anzeigezwecken verwendet wird und keinen Unterschied macht, wird sie als unkontrollierte Komponente gekapselt.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Was ist eine unkontrollierte Komponente?
Wir beginnen mit zwei Wörtern: „Kontrolliert“ und „Unkontrolliert“ sind Konzepte aus der Perspektive von Komponenten. Die wörtliche Bedeutung ist, dass Komponenten von niemandem kontrolliert werden, also nicht von der übergeordneten Komponente die Eigenschaften unkontrollierter Komponenten? Das heißt, alle Logik bezieht sich nur auf sich selbst und hat keine Kommunikation oder Überschneidung mit anderen Komponenten.
In HTML behalten Formularelemente wie , und ihren eigenen Status bei und werden basierend auf Benutzereingaben aktualisiert. In React sind diese Komponenten jedoch alle unkontrollierte Komponenten ohne Verarbeitung, denn wenn Sie sie tatsächlich verwenden, werden Sie feststellen, dass diese Komponenten den Wert, den wir ohne Verarbeitung eingeben, nicht automatisch aktualisieren
Beispiel
import React, { Component } from 'react';import ReactDOM from 'react-dom';class Demo1 erweitert Component { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('content'))Erläuterung unkontrollierter Komponenten
Da es sich bei einer unkontrollierten Komponente um eine Komponente handelt, die keine Schnittstelle zur Außenwelt hat, können wir unter bestimmten Umständen keine unkontrollierten Komponenten mehr verwenden.
Karussellkomponente (unkontrolliert), überlegen Sie, ob unsere Seite eine Karussellkomponente benötigt und diese Komponente nur einmal verwendet wird und nicht für die Wiederverwendung vorgesehen ist. Benötigt die Karussellkomponente diese? Es ist nicht erforderlich, mit der Außenwelt zu interagieren. Wenn die Karussellkomponente, die wir schreiben, unabhängig von der Ausführung des aktuellen Karusselldiagramms, einschließlich Klickereignissen, Karussellzeit und anderen Bedingungen, fest codiert ist, handelt es sich bei der Karussellkomponente um eine unkontrollierte Komponente Natürlich ist dieses Beispiel etwas weit hergeholt. Wenn wir Komponenten herstellen, müssen wir den aktuellen Status des Karussells kennen, was dazu führt, dass unsere unkontrollierten Komponenten nicht mehr anwendbar sind.
Bei der Entwicklung statischer Seiten verwenden wir normalerweise keine Frameworks und verwenden nur HTML zum Schreiben separater Dateien. Wenn eine bestimmte Seite in unserem Projekt jedoch eine statische Seite ist? Die von unseren unkontrollierten Komponenten angezeigten Seiten haben keine Kapselung und können nur angepasste Seiten sein. Wenn unsere Seitenkomponenten alleine existieren, sind sie unkontrollierte Komponenten.
Eine unkontrollierte Komponente ist eine unabhängige Komponente, die keinen Wert übergeben muss und keine Schnittmenge mit der übergeordneten Komponente der aktuellen Komponente aufweist. Wenn wir die Komponente kapseln, wird sie nur verwendet, wenn die aktuelle Komponente nur zu Anzeigezwecken dient und es gibt keinen Unterschied als unkontrollierte Komponente
Erweitern Sie Ihr Wissen:
Was ist eine kontrollierte Komponente?
Dies ist das Gegenteil einer unkontrollierten Komponente. Es bedeutet wörtlich, dass eine Komponente von einer übergeordneten Komponente gesteuert wird.
Wie die übergeordnete Komponente die untergeordnete Komponente steuert, wird natürlich durch die Übergabe von Werten gesteuert, wenn der props-Wert von der untergeordneten Komponente verwendet wird und der Inhalt oder die Methode oder das Anzeigeergebnis der untergeordneten Komponente aufgrund des von der übergeordneten Komponente übergebenen Werts geändert wird , die untergeordnete Komponente ist eine gesteuerte Komponente, die von übergeordneten Komponenten gesteuert wird
Beispiel
import React,{Component} from 'react';import ReactDOM from 'react-dom';class Input extensions Component{ constructionor(){ this.state = {val:''} } handleChange=(event) =>{ let val = event.target.value; this.setState({val}) } render(){ return ( <div> <p>{this.state.val}</p> //<input type= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //Input ist eine kontrollierte Komponente, die durch die Eigenschaften des Statusobjekts gesteuert wird </ div> ) }}ReactDOM.render(<Input/>,window.app)Wir sollten Eingabe nicht als Eingabekomponente betrachten. Wir sollten Eingabe als jede Komponente betrachten, auf die wir verweisen oder die wir selbst kapseln. Auch wenn es sich um eine von uns übergebene feste Zeichenfolge handelt, ist sie im Wesentlichen immer noch die Genau wie die Eingabekomponente prüfen kontrollierte Komponenten nicht, ob eine bidirektionale Bindung von Daten vorliegt, sondern ob sie von Natur aus kontrolliert sind. Wenn wir einen festen Wert übergeben, ist der Wert der Eingabekomponente festgelegt Obwohl wir props übergeben, handelt es sich um einen fest codierten Wert, der jedoch die Eingabekomponente steuert.
Erläuterung gesteuerter Komponenten
Kontrollierte Komponenten erscheinen tatsächlich in jedem Aspekt unserer Programmierung. Schließlich ist der Bedarf an statischen Seiten immer noch gering und unser js übernimmt die meiste Zeit die Logik muss interaktiv sein.
Der obige Eingabekomponentencode entspricht beispielsweise dem Textbereich und den ausgewählten Komponenten. Wir müssen alle einige Parameter (Requisiten) übergeben, um die spezifischen Rendering-Regeln und den Anzeigeinhalt der Komponente festzulegen damit wir die Komponente kontrollieren können.
Bidirektionale Datenbindung: Wenn wir einen Wert oder ein Attribut an den Wert übergeben, wird die Bedeutung der Komponente tatsächlich in eine kontrollierte Komponente geändert. Wenn wir jedoch onChange binden, wird unserer Komponente über onChange eine Datenänderung übergeben. In der Rückrufmethode ändern wir die Daten über setState, um sie erneut zu rendern. Dies ist die bidirektionale Bindung von Daten, die die Ansicht steuern, und die Ansicht steuert die Daten.
Zusammenfassung: Kontrollierte Komponenten und unkontrollierte Komponenten sind ein Konzept, das angibt, ob die aktuelle Komponente kontrolliert wird und ob es sich um eine separate Komponente handelt, die keine Interaktion mit anderen Inhalten hat. Einfach ausgedrückt kann eine völlig unabhängige Komponente als unkontrollierte Komponente angesehen werden Komponenten werden kontrolliert