Eine ausführliche Einführung in React-Referenzen

1. Was ist

Refs wird in Computern als Resilient File System (ReFS) bezeichnet.

Refs in React bieten uns die Möglichkeit, auf DOM Knoten oder React Elemente zuzugreifen, die in render Methode erstellt wurden

Das Wesentliche ist die von ReactDOM.render() zurückgegebene Komponenteninstanz. Wenn es sich um eine gerenderte Komponente handelt, wird die Komponenteninstanz zurückgegeben. Wenn es sich um ein dom Rendering handelt, wird der spezifische dom Knoten zurückgegeben.

2. Wie zu verwenden

Es gibt drei Möglichkeiten, ref zu erstellen:

• Übergeben Sie eine Zeichenfolge und erhalten Sie das entsprechende Element im Format der von this.refs übergebenen Zeichenfolge.
• Das Objekt wird übergeben. Das Objekt wird durch React.createRef() erstellt. Bei Verwendung ist das aktuelle Attribut im erstellten Objekt das entsprechende Element.
• Übergeben Sie eine Funktion, die zurückgerufen wird, wenn das DOM bereitgestellt wird. Diese Funktion übergibt ein Elementobjekt, das selbst gespeichert werden kann. Bei Verwendung wird einfach das zuvor gespeicherte Elementobjekt direkt abgerufen.
• Übergeben Sie den Hook. Der Hook wird mit der Methode useRef () erstellt. Bei Verwendung ist das aktuelle Attribut des generierten Hook-Objekts das entsprechende Element

Übergeben einer Zeichenfolge

Sie müssen lediglich das ref -Attribut im entsprechenden Element oder der entsprechenden Komponente hinzufügen

Klasse MyComponent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.meinRef = React.createRef();
  }
  rendern() {
    Rückgabewert <div ref="myref" />;
  }
}

Der Zugriff auf den aktuellen Knoten erfolgt folgendermaßen:

this.refs.myref.innerHTML = "hallo";

Eingehendes Objekt

refs werden mit React.createRef() erstellt und dann wird ref Attribut wie folgt zum React Element hinzugefügt:

Klasse MyComponent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.meinRef = React.createRef();
  }
  rendern() {
    gibt <div ref={this.myRef} /> zurück;
  }
}

Wenn ref an ein Element im render übergeben wird, ist in current Eigenschaft ref

const node = this.myRef.current;

Übergeben einer Funktion

Wenn ref als Funktion übergeben wird, übergibt der Parameter der Rückruffunktion während des Rendervorgangs ein Elementobjekt und speichert das Objekt dann über die Instanz

Klasse MyComponent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.meinRef = React.createRef();
  }
  rendern() {
    gibt <div ref={element => this.myref = element} /> zurück;
  }
}

Um das ref -Objekt zu erhalten, müssen Sie nur das zuvor gespeicherte Objekt übergeben.

const-Knoten = this.myref

Übergabe von Hooks

Erstellen Sie einen ref über useRef . Die allgemeine Verwendung entspricht React.createRef

Funktion App(Requisiten) {
  const myref = useRef()
  zurückkehren (
    <>
      <div ref={meinref}></div>
    </>
  )
}

Das Abrufen des ref Attributs erfolgt ebenfalls über current Attribut des hook -Objekts

const node = myref.current;

In den drei oben genannten Fällen wird ref -Attribut für native HTML Elemente verwendet. Wenn die von ref festgelegte Komponente eine Klassenkomponente ist, erhält ref Objekt die bereitgestellte Instanz der Komponente.

Beachten Sie, dass Sie das ref Attribut nicht für Funktionskomponenten verwenden können, da diese keine Instanzen haben.

3. Anwendungsszenarien

In einigen Fällen aktualisieren wir Komponenten mithilfe von refs , aber dieser Ansatz wird nicht empfohlen. In den meisten Fällen rendern wir untergeordnete Elemente mithilfe von props und state neu.

Übermäßiger Gebrauch von refs legt Komponenteninstanzen oder DOM Strukturen offen und verstößt gegen das Prinzip der Komponentenkapselung.

Vermeiden Sie beispielsweise die Offenlegung open() und close() in Dialog . Es ist besser, isOpen zu übergeben.

Aber refs sind in den folgenden Szenarien sehr nützlich:

• Fokussteuerung, Inhaltsauswahl und Steuerung von Dom-Elementen
• Inhaltseinstellung und Medienwiedergabe von Dom-Elementen
• Operationen an DOM-Elementen und Komponenteninstanzen
• Integrieren Sie DOM-Bibliotheken von Drittanbietern

Dies ist das Ende dieses Artikels zum Verständnis von React-Referenzen. Weitere Informationen zum Verständnis von React-Referenzen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!