Ref Callback-Attribut funktioniert nicht wie erwartet

Question

Ich habe zwei Beispiele mit der ref callback attribute. Das erste on hat einen Verweis auf die Callback-Funktion. Der zweite hat eine anonyme Funktion, die als Wert deklariert wird.

Die erste funktioniert wie erwartet. Aber, der zweite log a null auf aufeinanderfolgende Rendern.

Was ist der Grund dafür?

Beispiel 1 (das funktioniert gut)

class App extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.refCallback = this.refCallback.bind(this) 
 
    this.state = {} 
 
    } 
 
    
 
    refCallback(el){ 
 
    console.log(el) 
 
    } 
 
    
 
    render(){ 
 
    return <input type="text" 
 
     value={this.state.value} 
 
     ref={this.refCallback} 
 
     onChange={(e) => this.setState({value: e.target.value})} 
 
     /> 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Beispiel 2 (diese nicht funktioniert)

class App extends React.Component{ 
 
    constructor(props){ 
 
    super(props) 
 
    this.state = {} 
 
    } 
 

 
    render(){ 
 
    return <input type="text" 
 
     value={this.state.value} 
 
     ref={(el) => console.log(el)} 
 
     onChange={(e) => this.setState({value: e.target.value})} 
 
     /> 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 1

Dies ist discussed briefly on React's Github issues. Ich werde versuchen, das zu erklären, aber es ist schwer, Worte zu fassen.

Da Sie in Ihrem zweiten Beispiel keine "intelligente" Komponentenmethode aufrufen, tritt die console.log(el) jedes Mal auf, wenn die Komponente neu gerendert wird. Dies bedeutet auch, dass der spezifische Knoten (in diesem Fall Ihre Eingabe) aufgerufen wird entfernt und erneut gerendert, unabhängig davon, ob sich die el tatsächlich geändert hat. Wenn es von React entfernt wird, gibt es null zurück, weil das Element nicht mehr existiert, auch wenn es nur für einen Bruchteil einer Sekunde ist. Scheint so, als sei dies der Vollständigkeit halber getan.

Hier ist ein tweet von Dan Abramov erklärt dies ein wenig.

Answer 2

Hinzufügen zu Fabian Schultz

Dies geschieht, weil im ersten Fall, Sie Sie als Referenz der Funktion zum ref. Während des anfänglichen Renderns lautet die referenzierte Funktion instantiate (eine Instanz wird erstellt) und die element wird an diese Funktion übergeben. Bei den folgenden Renderings (Neu-Rendering) bleibt diese Instanz gleich. Also, React wird nicht rufen Sie diese Funktion, wie es bereits aufgerufen wird.

Aber im zweiten Fall wird eine Pfeilfunktion als Wert übergeben. Also wird die Funktion für jeden Reprint erneut als Wert übergeben. Dies führt zu zwei Instanzen von Pfeilfunktionen. Eine, aus dem vorherigen Render und die zweite aus dem letzten Render. Aus diesem Grund React nullifies die vorherige Instanz der Funktion. Daher gibt es null für die vorherige Instanz der Funktion zurück und gibt die element an die letzte Instanz der Funktion zurück.

Punkt zu nehmen: Immer Funktionsreferenz für ref

this helps nutzen!