Warum sollten Sie Bindungs- oder Inline-Pfeilfunktionen in der Render-Methode von React vermeiden?

Bindungs- oder Inline-Pfeilfunktionen in der Rendermethode vermeiden

Einführung

Bindungsfunktionen oder Verwendung Inline-Pfeilfunktionen innerhalb der Render-Methode werden in React nicht empfohlen, da sie beim Rendern zu Leistungsproblemen führen können. In diesem Artikel werden Alternativen zu dieser Vorgehensweise untersucht und Beispiele für deren Implementierung bereitgestellt.

Probleme mit der Bindung beim Rendern

Beim Binden von Funktionen oder der Verwendung von Inline-Pfeilfunktionen beim Rendern gibt es ein neues Bei jedem Rendering-Zyklus wird eine Instanz der Funktion erstellt. Dies kann zu Leistungseinbußen führen, insbesondere bei häufigem Neu-Rendering.

Alternativen zur Bindung

• Verwendung des Component Constructor:

  • Binden Sie die Funktion im Konstruktor, um beim Rendern dieselbe Instanz wiederzuverwenden.

• Verwenden der Eigenschaftsinitialisierer-Syntax:

  • Deklarieren Sie die Funktion im Klassenkörper und weisen Sie sie mithilfe von Pfeilfunktionen direkt einer Eigenschaft zu.

Szenario: Bestehen Zusätzliche Parameter

Betrachten Sie den Fall der Übergabe zusätzlicher Parameter an Ereignishandler innerhalb einer Map-Funktion. Erwägen Sie beispielsweise das Löschen eines Elements aus einer Aufgabenliste:

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)

Lösung: Untergeordnete Komponente

Um Bindungen zu vermeiden, erstellen Sie eine untergeordnete Komponente für den zugeordneten Inhalt:

Übergeordnete Komponente:

deleteTodo = (val) => {
    console.log(val)
}
todos.map(el => 
    <MyComponent val={el} onClick={this.deleteTodo}/> 

)

Untergeordnete Komponente (MyComponent):

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

Bei diesem Ansatz wird die Die Event-Handler-Funktion befindet sich in einer untergeordneten Komponente und liefert eine bessere Leistung beim Rendern.

Beispiel:

Hier ist ein vollständiges Beispiel, das den Ansatz der untergeordneten Komponente demonstriert:

class Parent extends React.Component {
     _deleteTodo = (val) => {
        console.log(val)
    }
    render() {
        var todos = ['a', 'b', 'c'];
        return (
           <div>{todos.map(el => 
             <MyComponent key={el} val={el} onClick={this._deleteTodo}/> 
        
           )}</div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        _deleteTodo = () => {
                     console.log('here');   this.props.onClick(this.props.val);
        }
        render() {
           return <div onClick={this._deleteTodo}> {this.props.val} </div>
        }
    }
    
ReactDOM.render(<Parent/>, document.getElementById('app'));

Das obige ist der detaillierte Inhalt vonWarum sollten Sie Bindungs- oder Inline-Pfeilfunktionen in der Render-Methode von React vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!