Was ist Ref in React

ref ist eine von React bereitgestellte Schnittstelle zum Bearbeiten von React-Komponenteninstanzen oder DOM-Elementen. Die Rückruffunktion besteht darin, eine Funktion auf dem Dom-Knoten oder der Komponente bereitzustellen. Der Eingabeparameter der Funktion ist der Dom-Knoten oder die Komponenteninstanz und der Effekt erreicht ist in der gleichen Zeichenfolgenform Es ist das Gleiche, beide erhalten ihre Referenz.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17.0.1-Version, Dell G3-Computer.

Im typischen Datenfluss von React ist die Übergabe von props die einzige Möglichkeit für die Interaktion zwischen übergeordneten und untergeordneten Komponenten. Durch die Übergabe eines neuen props-Werts kann die untergeordnete Komponente dies tun sein re- re-render, wodurch eine Kommunikation zwischen Eltern-Kind-Komponenten erreicht wird. Natürlich benötigen wir, wie auf der offiziellen Website von React beschrieben, in einigen Fällen zusätzlich zum typischen Datenvolumen von React (z. B. bei der Integration in eine Dom-Bibliothek eines Drittanbieters oder bei der Konzentration auf ein bestimmtes Dom-Element usw.). Eine Möglichkeit, Unterkomponenten zu ändern, ist die ref-Methode. props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。

ref 简介

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

例如，下面代码:

    const domCom = <button>button</button>;
    const refDom = ReactDOM.render(domCom，container);
    //ConfirmPass的组件内容省略
    const refCom = ReactDOM.render(<confirmpass></confirmpass>,container);
    console.log(refDom);
    console.log(refCom);

上述代码返回控制台结果如下图所示：

ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上；二者不同是与上图答案一样：

挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。

ref可以设置回调函数

ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：

• 组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。

• 组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

相关推荐：《react教程》

例如下面代码：

    RegisterStepTwo = React.createClass({
        getInitialState(){
          return {visible: true};
        },
      changeVisible(){
        this.setState({visible: !this.state.visible});
      },
      refCb(instance){
        console.log(instance);
      },
      render(){
        return(
          <p>
            <button>{this.state.visible ? '卸载' : '挂载'}ConfirmPass
            </button>
            {
              this.state.visible ?
                <confirmpass></confirmpass>: null
             }
           </p>
         )
      }
    });

上述代码，渲染到页面时可以发现console.log出对应的组件实例，切换按钮时，ConfirmPass也在挂载与卸载之间切换，所以能看到不同的console.log结果。

ref可以设置字符串

ref还可以设置为字符串值，而不是回调函数；这种方式基本不推荐使用，或者在未来的react版本中不会再支持该方式，但是可以了解一下。

例如下面input设置ref的值为字符串。

<input>

然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例，其实就是dom元素节点。

let inputEl = this.refs.input;
//然后通过inputEl来完成后续的逻辑，如focus、获取其值等等

获取ref引用组件对应的dom节点

不管ref设置值是回调函数还是字符串，都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOM.findDOMNode(ref)来获取，该方法常用于React组件上的ref。

ref在有状态组件中的使用

上文说到过ref用到react有状态组件时，ref引用的是组件的实例；所以可以通过子组件的ref可以访问到子组件实例的props、state、refs、实例方法(非继承而来的方法)等等。

使用ref访问子组件情况可能是以下case：

• 访问子组件的某个具体的dom节点完成某些逻辑，通过this.refs.childComponentRefName.refs.someDomRefName来完成，例如segmentfault上提问者提出的问题。

• 可以访问子组件的公共实例方法完成某写逻辑。例如子组件定义了一个reset方法用来重置子组件表单元素值，这时父组件可以通过this.refs.childComponentRefName.reset()

  ref-Einführung

  Das von React bereitgestellte ref-Attribut wird als Referenz auf die reale Instanz der Komponente dargestellt, bei der es sich tatsächlich um die von zurückgegebene Komponente handelt ReactDOM.render() Instanz; Wenn ReactDOM.render() eine Komponente rendert, gibt es eine Komponenteninstanz zurück. Es gibt einen bestimmten Dom-Knoten zurück.
• Zum Beispiel der folgende Code:

  function TestComp(props){
      let refDom;
      return (<p>
          </p><p> refDom = node}>
              ...
          </p>
      )
  }

  Der obige Code gibt das Konsolenergebnis wie unten gezeigt zurück:

ref kann an jede Komponente gehängt werden, entweder an eine Komponente oder an ein Dom-Element; die beiden sind es anders Die Antwort ist die gleiche wie im obigen Bild:

🎜Der an der Komponente hängende Verweis (hier bezieht sich die Komponente auf die zustandsbehaftete Komponente) stellt einen Verweis auf die Komponenteninstanz dar, und wenn er am Dom-Element montiert ist, stellt er das Spezifische dar dom-Elementknoten. 🎜🎜

ref kann auf eine Callback-Funktion gesetzt werden

🎜ref-Attribut kann auf eine Callback-Funktion gesetzt werden, was auch die offiziell dringend empfohlene Verwendung ist: 🎜

🎜 🎜Die Komponente ist Nach dem Mounten wird die Rückruffunktion sofort ausgeführt, und der Parameter der Rückruffunktion ist die spezifische Instanz der Komponente. 🎜🎜🎜🎜<code>Wenn die Komponente deinstalliert wird oder sich das ursprüngliche Ref-Attribut selbst ändert, wird der Rückruf ebenfalls sofort ausgeführt. Zu diesem Zeitpunkt ist der Rückruffunktionsparameter null Sorgen Sie für die Erinnerung. Geben Sie nach. 🎜🎜🎜🎜Verwandte Empfehlungen: „React Tutorial“🎜🎜Zum Beispiel das Folgender Code: 🎜rrreee🎜Beim Rendern des obigen Codes auf der Seite können Sie feststellen, dass console.log die entsprechende Komponenteninstanz ausgibt. Wenn die Schaltfläche umgeschaltet wird, wechselt ConfirmPass auch zwischen Mounten und Unmounten Sie können verschiedene Konsolen-.log-Ergebnisse sehen. 🎜

ref kann auf einen String gesetzt werden

🎜ref kann statt auf eine Callback-Funktion auch auf einen String-Wert gesetzt werden; diese Methode wird grundsätzlich nicht empfohlen, da sie sonst in zukünftigen React-Versionen nicht mehr unterstützt wird. Aber Sie können es herausfinden. 🎜🎜Zum Beispiel setzt die folgende Eingabe den Wert von ref auf eine Zeichenfolge. 🎜rrreee🎜Dann kann über this.refs.input an anderen Stellen wie Ereignisrückrufen auf die Komponenteninstanz zugegriffen werden, bei der es sich tatsächlich um den DOM-Elementknoten handelt. 🎜rrreee

Rufen Sie den DOM-Knoten ab, der der ref-referenzierten Komponente entspricht

🎜Unabhängig davon, ob der Ref-Einstellungswert eine Rückruffunktion oder eine Zeichenfolge ist, können Sie die Komponentenmontage über ReactDOM.findDOMNode(ref) erhalten. Nach dem echten Dom-Knoten. 🎜🎜Aber für den Fall, dass HTML-Elemente Ref verwenden, bezieht sich der Ref selbst auf den tatsächlichen Dom-Knoten des Elements. Es ist nicht erforderlich, ReactDOM.findDOMNode(ref) zu verwenden, um ihn zu erhalten wird häufig für Referenzen zu React-Komponenten verwendet. 🎜

Die Verwendung von ref in zustandsbehafteten Komponenten

🎜Wie oben erwähnt, bezieht sich ref auf die Instanz der Komponente, wenn ref in reaktionsfähigen zustandsbehafteten Komponenten verwendet wird über das untergeordnete Element kann der ref einer Komponente auf die props, state, refs und Instanzmethoden zugreifen (nicht). geerbt) der Unterkomponenteninstanz) und so weiter. 🎜🎜Die Verwendung von ref für den Zugriff auf Unterkomponenten kann die folgenden Fälle sein: 🎜
🎜🎜Zugriff auf einen bestimmten Dom-Knoten der Unterkomponente, um eine bestimmte Logik zu vervollständigen, über this.refs.childComponentRefName.refs.someDomRefName zum Vervollständigen, z. B. die Frage, die der Fragesteller bei segmentfault gestellt hat. 🎜🎜🎜🎜Sie können auf die öffentlichen Instanzmethoden von Unterkomponenten zugreifen, um bestimmte Logik zu vervollständigen. Beispielsweise definiert eine untergeordnete Komponente eine <code>reset-Methode, um den Formularelementwert der untergeordneten Komponente zurückzusetzen. Zu diesem Zeitpunkt kann die übergeordnete Komponente die untergeordnete Komponente über this.refs.childComponentRefName vervollständigen. reset() Zurücksetzen von Komponenten-Formularelementen. 🎜🎜🎜🎜...🎜🎜🎜🎜Aber React empfiehlt nicht, direkt auf die Instanzmethoden der untergeordneten Komponenten in der übergeordneten Komponente zuzugreifen, um bestimmte Logik zu vervollständigen. In den meisten Fällen verwenden Sie bitte die Standard-React-Datenflussmethode. Das Ersetzen ist klarer. 🎜🎜 Darüber hinaus wird der obige Fall äußerst hässlich, wenn die Komponentenbeziehungen tief verschachtelt sind. 🎜

ref在无状态组件中的使用

上文说到的react组件都是指有状态的，对于无状态组件stateless component而言，正如这篇文章React创建组件的三种方式及其区别里描述的一样，无状态组件是不会被实例化的，在父组件中通过ref来获取无状态子组件时，其值为null，所以：

无法通过ref来获取无状态组件实例。

虽然无法通过ref获取无状态组件实例，但是可以结合复合组件来包装无状态组件来在其上使用ref引用。

另外，对于无状态组件我们想访问的无非是其中包含的组件或者dom元素，我们可以通过一个变量来保存我们想要的组件或者dom元素组件的实例引用。例如下面代码：

function TestComp(props){
    let refDom;
    return (<p>
        </p><p> refDom = node}>
            ...
        </p>
    )
}

这样，可以通过变量refDom来访问到无状态组件中的指定dom元素了，访问其中的其他组件实例类似。

ref在HOC中存在问题

react的HOC是高阶组件，简单理解就是包装了一个低阶的组件，最后返回一个高阶的组件；高阶组件其实是在低阶组件基础上做了一些事情，比方说antd组件的Form create的方法，它就是在为低阶组件封装了一些特殊的属性，比如form属性。

既然HOC会基于低阶组件生成一个新的高阶组件，若用ref就不能访问到我们真正需要的低阶组件实例，我们访问到的其实是高阶组件实例。所以:

若HOC不做特殊处理，ref是无法访问到低阶组件实例的

要想用ref访问低阶组件实例，就必须得HOC支持，就像Redux的connect方法提供的withRef属性来访问低阶组件一样。具体可以参考这里。

总结

ref提供了一种对于react标准的数据流不太适用的情况下组件间交互的方式，例如管理dom元素focus、text selection以及与第三方的dom库整合等等。 但是在大多数情况下应该使用react响应数据流那种方式，不要过度使用ref。

另外，在使用ref时，不用担心会导致内存泄露的问题，react会自动帮你管理好，在组件卸载时ref值也会被销毁。

最后补充一点：

不要在组件的render方法中访问ref引用，render方法只是返回一个虚拟dom，这时组件不一定挂载到dom中或者render返回的虚拟dom不一定会更新到dom中。

Das obige ist der detaillierte Inhalt vonWas ist Ref in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!