Eine kurze Diskussion über das Prinzip der bidirektionalen Datenbindung von React

Wenn Sie Vue gelernt haben und ein tiefes Verständnis der bidirektionalen Datenbindung von Vue haben, werden Sie verstehen, dass der Kern der bidirektionalen Datenbindung Vue 2.0 eigentlich darin besteht, Datenentführung und -überwachung über Object.defineProperty zu erreichen.

In Vue 3.0 wird Proxy verwendet, um das gesamte Objekt zu überwachen und Vue2.0 zu optimieren.

Was ist bidirektionale Datenbindung?

Zweiseitige Bindung zwischen Datenmodellen und Ansichten.

Wenn sich die Daten ändern, ändert sich auch die Ansicht, und wenn sich die Ansicht ändert, ändern sich auch die Daten synchron. Man kann sagen, dass die Änderungen des Benutzers an der Ansicht automatisch mit dem Datenmodell synchronisiert werden und sich auch das Datenmodell auf die gleiche Weise ändert.

Vorteile der bidirektionalen Datenbindung: Es müssen keine CRUD-Operationen (Erstellen, Abrufen, Aktualisieren, Löschen) wie bei der unidirektionalen Datenbindung durchgeführt werden. Die bidirektionale Datenbindung wird am häufigsten bei Formularen verwendet. Auf diese Weise haben wir, wenn der Benutzer die Eingabe auf der Frontend-Seite vervollständigt, die Eingabedaten des Benutzers erhalten und sie ohne Operation in das Datenmodell eingefügt.

Implementieren der bidirektionalen Datenbindung

Allerdings gibt es in React keinen bidirektionalen Datenbindungsmechanismus und wir müssen ihn selbst implementieren.

Datenauswirkungsansicht

Tatsächlich hat uns React dabei geholfen, diese Funktion zu erreichen, indem wir setState({ }) zum Ändern von Daten verwendet haben.
(Die von React intern bereitgestellte Änderungsmethode) erlaubt keine Datenänderung durch die Methode this.state.屬性名= 數據.

Code

importiere React, {Komponente} von „react“;
//Antd-UI-Bibliothek importierenimport { Button } von „antd“;  
Klasse Home erweitert Komponente {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = { 
            Eingabewert:'',
         };
    }   
    setzeWert=()=>{
        dies.setState({
            inputVal: "Wert ändern"
        })
    }
    rendern() {
        zurückkehren (
            <div Klassenname="Startseite" >
                Home-Komponente<p> {this.state.inputVal}</p>
                 {/* Antd-UI-Bibliothek verwenden*/}
                <Button type="primary" onClick={this.setValue}>Daten ändern</Button>
            </div>
        );
    }
}
Standard-Homepage exportieren;

Wirkung

Ansichten wirken sich auf Daten aus

Das von React bereitgestellte onChage 監聽事件wird verwendet, um die dynamische Eingabe von Daten zu realisieren. Gleichzeitig wird value oder defaultValue verwendet, um den Inhalt im input anzuzeigen. Zur Vereinfachung der Anzeige wird hier das p Tag verwendet, um den Inhalt anzuzeigen

Code

importiere React, {Komponente} von „react“;
importiere { Button } von 'antd'; // antd UI-Bibliotheksklasse Home erweitert Komponente {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = { 
            Eingabewert:'',
         };

    }    
    Änderung = (ev)=>{
        dies.setState({
            Eingabewert:ev.Zielwert
        })
    }
    rendern() {
        zurückkehren (
            <div Klassenname="Startseite" >
                Home-Komponente <Eingabe 
                    beiÄnderung={diese.Änderung}
                    // Wert={this.state.inputVal}
                    Standardwert = {this.state.inputVal}
                    Platzhalter="Textinhalt eingeben"
                 />
                <p>&emsp;{dieser.Zustand.Eingabewert}</p>
            </div>
        );
    }
}
Standard-Homepage exportieren;

Wirkung

Beachten:

Bei value kann nur einer value und defaultValue verwendet werden, andernfalls wird eine Warnung ausgegeben

Damit ist dieser Artikel über das Prinzip der bidirektionalen Datenbindung von React abgeschlossen. Weitere relevante Inhalte zur bidirektionalen Datenbindung von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!