So verstehen Sie das Ref-Attribut von React genau

Überblick

Zunächst einmal sind Refs und ref zwei Konzepte. Refs ist ein von React bereitgestelltes Objekt, das mit einer bestimmten API erstellt werden kann. Die Struktur dieses Objekts ist wie folgt:

Dieses Objekt hat nur ein Attribut, nämlich aktuell. Wofür wird dieses Objekt also verwendet?

Refs ermöglichen uns den Zugriff auf DOM-Knoten oder React-Elemente, die in der Rendermethode erstellt wurden. (DOM-Knoten beziehen sich auf native DOM-Elemente und die in der Methode render() erstellten React-Elemente beziehen sich auf Komponentenelemente der React-Klasse)

Wir können uns eine solche Anforderung vorstellen: zwei Bruderelemente, eines ist Div und das andere ist Button. Nun möchte ich per Klick auf den Button die Hintergrundfarbe des Div ändern. In der nativen DOM-Technologie können wir document.querySelector('xxx') in der Schaltflächenklickfunktion verwenden, um den Div-Knoten auszuwählen und dann seinen Hintergrundstil zu ändern. Unabhängig davon, ob es sich um Frameworks wie Vue oder React handelt, werden Seitenelemente dynamisch generiert und können nicht über die DOM-API abgerufen werden. Darüber hinaus sind die meisten in React betriebenen Elemente keine nativen DOM-Elemente, sondern React-Elemente. Wie wählen Sie also ein natives DOM-Element oder React-Element aus?

Theoretisch müssen wir tatsächlich keine Auswahlvorgänge durchführen, da sonst das Konzept der Komponentenunabhängigkeit im Front-End-Framework verloren ginge. Im Allgemeinen werden Ereignisse über die Komponentenkommunikation behandelt. In der obigen Situation können Sie EventBus verwenden, um mit Komponenten zu kommunizieren. Lösen Sie benutzerdefinierte Ereignisse im Klickereignis der Schaltfläche aus, hören Sie auf benutzerdefinierte Ereignisse im Div und lassen Sie die Schaltfläche das Div benachrichtigen, die Hintergrundfarbe in Form einer Ereignisbenachrichtigung zu ändern, anstatt das Div direkt für die Operation im Schaltflächenereignis abzurufen.

Aber React bietet uns eine Möglichkeit, direkt auf DOM-Elemente und React-Elemente zuzugreifen, und zwar über Refs. Die Verwendung ist sehr einfach: Fügen Sie dem Element, auf das Sie zugreifen möchten, ein Ref-Attribut hinzu und hängen Sie das Refs-Objekt an das Ref-Attribut an. Dann ist das aktuelle Attribut des Refs-Objekts nicht mehr leer, sondern das entsprechende DOM-Element oder die entsprechende Instanz des React-Elements.

1. Erstellen eines Refs-Objekts

In React gibt es zwei Möglichkeiten, Ref-Objekte zu erstellen:

1.1 React.createRef()

React.createRef() erstellt ein Ref-Objekt, auf das durch Anhängen an das Ref-Attribut zugegriffen werden kann.
Diese Methode kann sowohl in Funktionskomponenten als auch in Klassenkomponenten verwendet werden.

1.2 React.useRef(Anfangswert)

Nach dem Hinzufügen von Hook in React 16.8 gibt es einen weiteren Hook, der Ref-Objekte erstellen kann. Das heißt, React.useRef(initialValue).
useRef gibt ein veränderbares Ref-Objekt zurück, dessen .current-Eigenschaft mit dem übergebenen Argument (InitialValue) initialisiert wird. Das zurückgegebene Ref-Objekt bleibt während des gesamten Lebenszyklus der Komponente unverändert.
Diese Methode kann nur in Funktionskomponenten verwendet werden.

2. Verwendung des ref-Attributs

Das Ref-Attribut kann nur zu nativen DOM-Elementen oder React-Klassenkomponenten hinzugefügt werden. Sie können das Ref-Attribut nicht auf Funktionskomponenten anwenden, da Funktionskomponenten keine Instanzen haben.

Wenn Sie das Ref-Attribut für eine Funktionskomponente verwenden möchten, können Sie den Ref über React.forwardRef an das native DOM-Element innerhalb der Funktionskomponente weiterleiten.

2.1 Ref zu nativen DOM-Elementen hinzufügen

Innerhalb einer Klassenkomponente

Klasse App erweitert React.Component {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dies.meinRef = React.createRef()
    } 
    KomponenteDidMount(){
        Konsole.log(diese.meineRef)
        Konsole.log(diese.meineRef.aktuell)
    }
    machen(){
        zurückkehren (
            <div ref={this.myRef}>Ich bin die App-Komponente</div>
        )
    }
}

Innerhalb einer Funktionskomponente

const App = ()=>{
    const myRef = React.useRef(null)
    //const myRef = React.createRef() Beide Möglichkeiten zum Erstellen von Ref-Objekten können React.useEffect(()=>{ sein.
        console.log(meineRef)
        Konsole.log(myRef.current)
    },[]) //Simulationslebenszyklus return (
        <div ref={myRef}>Ich bin das Div, das ref innerhalb der Funktionskomponente verwendet</div>
    )
}

2.2 Ref zur Klassenkomponente hinzufügen

Klasse ClassChild erweitert React.Component{
    machen(){
        zurückkehren (
            <div>Ich bin die untergeordnete Klassenkomponente ClassChild der App-Komponente</div>
        )
    }
}

Klasse App erweitert React.Component {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dies.meinRef = React.createRef()
    } 
    KomponenteDidMount(){
        console.log(diese.meineRef)
        Konsole.log(diese.meineRef.aktuell)
    }
    machen(){
        zurückkehren (
            <ClassChild ref={diese.meineRef}/>
        )
    }
}

2.3 Fügen Sie dem von der Klassenkomponente weitergeleiteten nativen DOM-Element einen Verweis hinzu

Das Prinzip der Ref-Weiterleitung besteht darin, das in der übergeordneten Komponente definierte Ref-Objekt als normales Attribut an die untergeordnete Komponente zu übergeben. Anschließend empfängt die untergeordnete Komponente es über Requisiten und weist es ihrem eigenen DOM-Element zu.

Klasse ClassChild erweitert React.Component{
    machen(){
        zurückkehren (
            <div ref={this.props.refProp}>Ich bin die untergeordnete Klassenkomponente ClassChild der App-Komponente</div> //Ref hinzugefügt
        )
    }
}

Klasse App erweitert React.Component {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dies.meinRef = React.createRef()
    } 
    KomponenteDidMount(){
        Konsole.log(diese.meineRef)
        Konsole.log(diese.meineRef.aktuell)
    }
    machen(){
        zurückkehren (
            <ClassChild refProp={this.myRef}/> // als normale Eigenschaft übergeben)
    }
}

2.4 Fügen Sie dem von der Funktionskomponente weitergeleiteten nativen DOM-Element einen Verweis hinzu

Gemäß dem Prinzip der Weiterleitung von Klassenkomponenten ist die Implementierungsmethode, die mir eingefallen ist, wie folgt:

const FunChild = (Eigenschaften)=>{
    zurückkehren (
        <div ref={props.refProp}>Ich bin eine Funktionskomponente FunChild</div>
    )
}
Klasse App erweitert React.Component {
    Konstruktor (Requisiten) {
        super(Requisiten)
        dies.meinRef = React.createRef()
    } 
    KomponenteDidMount(){
        Konsole.log(diese.meineRef)
        Konsole.log(diese.meineRef.aktuell)
    }
    machen(){
        zurückkehren (
            <FunChild refProp={diese.meineRef}/>
        )
    }
}

Diese Implementierung ist möglich, aber es ist nicht die Art, das ref-Attribut direkt auf der Funktionskomponente zu verwenden. React bietet eine Möglichkeit, ref direkt auf der Funktionskomponente zu verwenden, nämlich React.forwardRef zum Erstellen eines React-Elements zu verwenden.

Reagieren.forwardRef

const FunChild = React.forwardRef((props, ref)=>{
    zurückkehren (
        <div ref={ref}>Ich bin die Funktionskomponente FunChild</div>
    )
}) // Verwenden Sie React.forwardRef, um die Funktionskomponentenklasse App extends React.Component{ zu transformieren
    Konstruktor (Requisiten) {
        super(Requisiten)
        dies.meinRef = React.createRef()
    } 
    KomponenteDidMount(){
        Konsole.log(diese.meineRef)
        Konsole.log(diese.meineRef.aktuell)
    }
    machen(){
        zurückkehren (
            <FunChild ref={this.myRef}/> // Übergebe ref direkt an die Funktionskomponente
        )
    }
}

Es fühlt sich an, als ob React.forwardRef das Ref-Attribut nur aus den Props extrahiert.
Obwohl die obige Methode die Verwendung von Ref-Attributen für Funktionskomponenten implementiert, ist das Ref-Objekt zu diesem Zeitpunkt das native DOM-Element oder eine andere Klassenkomponente innerhalb der Funktionskomponente, auf die zugegriffen wird. Mit anderen Worten, die Funktionskomponente hat hier lediglich eine Weiterleitungsfunktion.

3. Rückrufreferenzen

In den obigen Methoden erstellen wir ein Ref-Objekt und mounten es über das Ref-Attribut in ein natives DOM-Element oder eine Klassenkomponente, um auf das Element oder die Instanz zuzugreifen.
Tatsächlich kann das Ref-Attribut zusätzlich zu einem Ref-Objekt eine Rückruffunktion erhalten.
Wenn das Ref-Attribut ein Ref-Objekt empfängt, wird dessen entsprechendes DOM-Element oder seine Klassenkomponenteninstanz direkt dem aktuellen Attribut im Ref-Objekt zugewiesen. Wenn das Ref-Attribut eine Rückruffunktion empfängt, wird die Rückruffunktion mit ihrem entsprechenden DOM-Element oder der Klassenkomponenteninstanz als Parameter der Rückruffunktion aufgerufen.
Daher können wir Callback-Refs verwenden, ohne auf Ref-Objekte angewiesen zu sein, und die zugreifbaren Elemente oder Instanzen flexibler steuern.

Klasse App erweitert React.Component {
    Konstruktor (Requisiten) {
        super(Requisiten)
        this.myRef = null
        this.setMyRef = (Element)=>{
            this.myRef = Element
        }
    } 
    KomponenteDidMount(){
        Konsole.log(diese.meineRef)
    }
    machen(){
        zurückkehren (
            <div ref={this.setMyRef}>Ich bin die App-Komponente</div>
        )
    }
}

Oben finden Sie Einzelheiten zum tieferen Verständnis des Ref-Attributs von React. Weitere Informationen zum tieferen Verständnis des Ref-Attributs von React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!