Detaillierte Erklärung der Verwendung von Refs in den drei Hauptattributen von React

Refs ist eine Methode, die in React verwendet wird, um Knoten abzurufen, wenn einige Statuswerte in einer JSX-Komponente oder einem DOM abgerufen werden. In der offiziellen Erklärung von React ist sein Anwendungsbereich wie folgt:

• Verwalten Sie Fokus, Textauswahl oder Medienwiedergabe.
• Löst eine erzwungene Animation aus.
• Integrieren Sie DOM-Bibliotheken von Drittanbietern.
  

In der Dokumentation von React wird immer wieder betont, dass Sie Refs nicht übermäßig verwenden sollten. Wenn wir also native DOM-Objekte zur Lösung verwenden können, versuchen Sie, keine Refs zu verwenden. Geben Sie gemäß der vorherigen Schreibmethode zunächst die Schreibmethode für Refs in Klassenkomponenten und Funktionskomponenten an.

Klassenkomponente

In einer Klasse gibt es drei Möglichkeiten, Referenzen zu verwenden. Die am häufigsten verwendete ist Callback.

//Refs direkt definieren, veraltete Klasse App extends React.PureComponent{
    Eingabe ändern = ()=>{
        const {Eingabe} = diese.refs
    }
    rendern() {
        zurückkehren (
            <div>
                <input type="text" placeholder={"Bitte geben Sie Ihren Wert ein"} onBlur={this.changeInput} ref={"input"}/>
            </div>
        )
    }
}

//Verwenden Sie im Rückrufformular die Klasse App extends React.PureComponent{
    Eingabe ändern = ()=>{
        Konsole.log(diese.inputRef);
    }
    rendern() {
        zurückkehren (
            <div>
                <input type="text" placeholder={"Bitte geben Sie Ihren Wert ein"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
            </div>
        )
    }
}

//Verwende createRef
Klasse App erweitert React.PureComponent{
    inputRef = React.createRef()
    Eingabe ändern = ()=>{
        Konsole.log(diese.inputRef.current);
    }
    rendern() {
        zurückkehren (
            <div>
                <input type="text" placeholder={"Bitte geben Sie Ihren Wert ein"} onBlur={this.changeInput} ref={this.inputRef}/>
            </div>
        )
    }
}

Oben sind die drei Möglichkeiten zum Schreiben von Ref von Klassenkomponenten

Funktionale Komponenten

Funktion App(){
    const inputRef = useRef("")
    zurückkehren (
        <div>
            <input type="text" placeholder={"Bitte geben Sie Ihren Wert ein"} ref={inputRef}/>
        </div>
    )
}

Verwenden Sie ein useRef, um den Code direkt zu vervollständigen

Interview-FAQ: Welche Rolle spielen Schiedsrichter in React?

Refs sind Handles, mit denen React uns sicheren Zugriff auf DOM-Elemente oder Komponenteninstanzen bietet. In einer Klassenkomponente behandelt React das erste Argument im Ref-Attribut als Handle im DOM. In der Funktionskomponente kann React auch mithilfe der Hook-API useRef Referenzen abrufen (die useRef-Funktion wird häufig in Hooks verwendet, d. h. die gespeicherten Daten werden beim Aktualisieren der Komponente nicht aktualisiert, sodass konstante Mengen geschrieben werden).

Oben finden Sie den detaillierten Inhalt der ausführlichen Erklärung zur Verwendung von Refs, einem der drei Hauptattribute von React. Weitere Informationen zu Refs, einem der drei Hauptattribute von React, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!