Beispiele für die Verwendung von React Ref

Ich schreibe schon seit einiger Zeit React und habe 99 % der Zeit über State, Prop, UseState und UseEffect geschrieben. Besonders mit Ref bin ich nicht vertraut. Vor ein paar Tagen habe ich eine Anforderung gestellt und wollte mit Ref einen Statuswert einer untergeordneten Komponente aus einer übergeordneten Komponente implementieren, aber das ist fehlgeschlagen. Ich möchte einige Inhalte zu Ref organisieren.

Was ist ref

Offizielle Website-Einführung:

Im typischen React-Datenfluss sind Props die einzige Möglichkeit für übergeordnete Komponenten, mit untergeordneten Komponenten zu interagieren. Um eine untergeordnete Komponente zu ändern, müssen Sie sie mit den neuen Eigenschaften erneut rendern. Es kann jedoch Fälle geben, in denen Sie Änderungen an Unterkomponenten außerhalb des typischen Datenflusses erzwingen müssen. Die geänderte untergeordnete Komponente kann eine Instanz einer React-Komponente oder eines DOM-Elements sein. Für beide Fälle bietet React eine Lösung, die darin besteht, ref zu verwenden, um die Dom- oder Komponenteninstanz abzurufen.

So verwenden Sie ref

Platzieren Sie es auf dem DOM-Element

Dies ist die direkteste Verwendung von ref

Exportklasse Demo erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dies.meineRef = createRef()
  }
  componentDidMount() {
    Konsole.log(diese.meineRef)
  }
  rendern() {
    Rückgabewert <div ref={this.myRef}>Test</div>
  }
}

Drucken und sehen, was ref ist

Es ist ersichtlich, dass ref.current das DOM-Element erhält, sodass wir einige Funktionen des DOM-Elements selbst implementieren können, z. B. den Eingabefokus:

Exportklasse Demo erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dies.meineRef = createRef()
  }

  beim Klicken = () => {
    dies.myRef.current.focus()
  }

  rendern() {
    zurückkehren (
      <div>
        <button onClick={this.onClick}>Fokus</button>
        <input ref={this.myRef} />
      </div>
    )
  }
}

Die offizielle Website bietet auch eine Form des Ref-Callbacks:

Exportklasse Demo erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    this.myRef = null
  }

  beim Klicken = () => {
    dies.meineRef.fokus()
  }

  rendern() {
    zurückkehren (
      <div>
        <button onClick={this.onClick}>Fokus</button>
        <input ref={ele => this.myRef = ele} /> // ele hier ist das Dom-Element</div>
    )
  }
}

Platzieren Sie es auf der Klassenkomponente

Tatsächlich ähneln Komponenten nativen DOMs. Sie sind auch einige Elemente mit ihrer eigenen Benutzeroberfläche und einigen Funktionen. Indem Sie also einen Verweis auf eine Komponente setzen, können Sie auch ein Beispiel der Komponente erhalten.

// Untergeordnete Komponentenklasse Child erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Name: "xx"
    }
  }
  rendern() {
    return <div>untergeordnetes Element {this.state.name}</div>
  }
}

Exportklasse Demo erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dies.meineRef = createRef()
  }

  componentDidMount() {
    Konsole.log(diese.meineRef)
  }

  rendern() {
    zurückkehren (
     <Untergeordnete Referenz={this.myRef} />
    )
  }
}

Nachdem wir nun die Instanz der untergeordneten Komponente abrufen können, können wir die untergeordnete Komponente bedienen. Wie am Anfang des Artikels erwähnt, möchte ich beispielsweise einige Statuswerte der untergeordneten Komponente in der übergeordneten Komponente abrufen.

Klasse Child erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Anzahl: 0
    }
  }
  
  beim Klicken = () => {
    dies.setState({Anzahl: dieser.state.count+1})
  }

  rendern() {
    return <button onClick={this.onClick}>Klick +1: {this.state.count}</button>
  }
}

Exportklasse Demo erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dies.meineRef = createRef()
  }

  beim Klicken = () => {
    console.log(this.myRef.current.state.count) // Den Statuswert der untergeordneten Komponente abrufen}


  rendern() {
    zurückkehren (
      <div>
        <button onClick={this.onClick}>Anzahl der Klicks auf die Unterkomponente abrufen</button>
        <Child ref={this.myRef} /> // ref ruft die untergeordnete Komponenteninstanz ab</div>
    )
  }
}

Da ich den Wert abrufen kann, kann ich die Funktion auch zum Ändern der untergeordneten Komponente verwenden.

Klasse Child erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Name: "xx"
    }
  }
  Änderungsname = () => {
    dies.setState({name: 'ww'})
  }
  rendern() {
    return <div>untergeordnetes Element {this.state.name}</div>
  }
}

Exportklasse Demo erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dies.meineRef = createRef()
  }

  beim Klicken = () => {
    this.myRef.current.changeName() // Die Elternkomponente greift in die Kindkomponente ein}

  rendern() {
    zurückkehren (
      <div>
        <button onClick={this.onClick}>Den Status der untergeordneten Komponente ändern</button>
        <Untergeordnete Referenz={this.myRef} />
      </div>
    )
  }
}

Dieses Beispiel ist natürlich nicht angemessen. Wenn die übergeordnete Komponente den Status der untergeordneten Komponente ändern möchte, sollte sie den Status an die übergeordnete Komponente weitergeben und ihn dann als Eigenschaften der untergeordneten Komponente übergeben.
Ref bietet hauptsächlich eine Möglichkeit, Props zu umgehen, um eine Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu erreichen.

Legen Sie es auf die Funktionskomponente

Dies ist der Fehler, den ich beim Schreiben der Anforderungen am Anfang des Artikels gemacht habe. Ref kann nicht auf Funktionskomponenten platziert werden, da Funktionskomponenten keine Instanzen haben.

const Kind = () => {
  return <div>untergeordnete Komponente</div>
}

exportiere const Demo = () => {
  const myRef = useRef() // Sie können einen Ref in einer Funktionskomponente erstellen

  useEffect(() => {
    console.log(meineRef)
  }, [])

  return <Child ref={myRef} /> // Aber es ist ungültig, wenn es auf einer Funktionskomponente platziert wird}

Also können Funktionskomponenten kein Ref verwenden? Natürlich nicht, haha. Wir können die Funktionskomponente mit forwardRef umschließen.

const Child = (props, ref) => { // Nach dem Verpacken wird zusätzlich zu den ursprünglichen Props auch ref übergeben <div ref={ref}>child component</div> // Muss noch auf dem Dom gemountet werden}

const ProChild = React.forwardRef(Child) // Der entscheidende Punkt ist hier export const Demo = () => {
  const myRef = useRef()

  useEffect(() => {
    console.log(meineRef)
  }, [])

  return <ProChild ref={myRef} />
}

Hier ein Tipp von der offiziellen Website:

Da Funktionskomponenten auch ref verwenden können, verwenden wir Funktionskomponenten, um die übergeordnete Komponente zu implementieren und die Daten der untergeordneten Komponente abzurufen. Es ist jedoch ersichtlich, dass der ref nach dem Umschließen mit forwardRef noch auf der Dom- oder Klassenkomponente gemountet werden muss. Wenn ich nur die Daten mounten möchte, muss ich auch useImperativeHandle verwenden.

const Child = (Eigenschaften, Referenz) => {
  const [Anzahl, Anzahl festlegen] = useState(0)

  useImperativeHandle(
    Verweis,
    () => ({ // Dies sind die Daten, die dem externen Verweis zur Verfügung gestellt werden getVal: ()=> count
    }),
    [zählen],
  )

  const beiKlick = () => {
    setCount(vorher => vorher+1)
  }
  return <button onClick={onClick}>Klick +1: {count}</button>
}

const ProChild = React.forwardRef(Child)

exportiere const Demo = () => {
  const myRef = useRef()

  const beiKlick = () => {
    console.log(myRef.current.getVal()) // Den Wert der untergeordneten Komponente abrufen}

  return <><button onClick={onClick}>Anzahl der Klicks auf die untergeordnete Komponente abrufen</button><ProChild ref={myRef} /></>
}

Bisher wurden die bei der Anforderung verbleibenden Probleme gelöst.

Zusammenfassen

Abschließend muss betont werden, dass in dem Szenario, in dem die übergeordnete Komponente den Status der untergeordneten Komponente erhält, dies im Allgemeinen durch Statusförderung + Rückruf kommuniziert wird und die Anforderung letztendlich auf diese Weise implementiert wird. Der Grund, warum ich ref am Anfang verwenden wollte, war, dass ich dachte, dass nach der Statusförderung die Änderung der untergeordneten Komponente dazu führen würde, dass die übergeordnete Komponente erneut gerendert wird, aber ich wollte nur die Daten abrufen, ohne dass ein Rendering verursacht wird.
Ich habe dem Meister meine Gedanken beim Schreiben der Anforderungen mitgeteilt und die Meinungen des Meisters lauten wie folgt:

• Priorisieren Sie die Statusverbesserung
• Wenn es Leistungsprobleme gibt, erwägen Sie eine Zustandsverbesserung + Memo
• Wenn Sie Memos nicht zu mehreren Komponenten hinzufügen möchten, sollten Sie die Einführung von Redux/Mobx in Betracht ziehen.
• Wenn die Einführung von Redux/Mobx Kosten verursacht, ist Ref nicht unmöglich, hahahaha

Das Obige ist der detaillierte Inhalt der ausführlichen Erklärung zur Verwendung von React ref. Weitere Informationen zur Verwendung von React ref finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!