Verschlüsse in React

Question

Ist es in Ordnung, Verschlüsse für Event-Handler zu verwenden? Zum Beispiel habe ich eine Funktion und eine Menge Menü in der Navigation und in Navigationskomponente verwende ich so etwas wie diese:

handleMenuClick(path) { 
    return() => router.goTo(path) 
} 
... 
<MenuItem 
    handleTouchTap={this.handleMenuClick('/home')} 
> 

oder soll ich gerade Funktion Pfeil bevorzugen?

<MenuItem 
    handleTouchTap={() => router.goTo('/home')} 
> 

erste Variante wirklich Code sauberer machen, aber ich mache mir Sorgen um die Leistung mit einer großen Anzahl solcher Elemente

Answer 1

Beide sollen vermieden werden.

Während beide funktionieren, haben beide die gleiche Schwäche, dass sie unnötige Rendern verursachen, da die Funktion dynamisch erstellt wird und daher als ein anderes Objekt angezeigt wird.

Anstelle von beiden, möchten Sie Ihre Funktionen auf eine statische Weise erstellen und dann übergeben. Für etwas wie Ihre MenuItem, es sollte nur die Zeichenfolge für den Pfad und dann den Code, um das Routing zu tun Innerhalb. Wenn der Router benötigt wird, sollten Sie ihn stattdessen weitergeben.

sollte die Funktion dann (im Konstruktor in der Regel) eine prä- bind -ed Funktion sein und nur in geben.

export class MenuItem extends React.Component { 
    constructor() { 
     this.handleClick =() => this.props.router.go(this.props.path); 
    } 

    render() { 
     return (
     <Button onClick={ this.handleClick }>Go to link</Button> 
    ); 
    } 
} 

Sie einen Pfeil Funktion im Konstruktor verwenden können. Auf diese Weise wird nicht jede Renderfunktion neu erstellt und Sie vermeiden unnötige Renderings. Dieses Muster funktioniert gut für einfache einfache Funktionen. Für komplexere Funktionen können Sie sie auch als separate Funktion erstellen, dann bind im Konstruktor.

export class MenuItem extends React.Component { 
    handleClick() { 
    this.props.router.go(this.props.path); 
    } 

    constructor() { 
    this.handleClick = this.handleClick.bind(this); 
    } 

    render() { /* same as above */ } 
} 

Der Punkt ist, dass der Handler jedes Mal die gleiche Funktion ist. Wenn es anders wäre (was beide oben beschriebenen Methoden wären), würde React unnötige Neu-Renderings des Objekts durchführen, weil es jedes Mal eine andere Funktion wäre.

Hier sind zwei Artikel, die in mehr Details gehen:

• https://ryanfunduk.com/articles/never-bind-in-render/
• https://daveceddia.com/avoid-bind-when-passing-props/

Answer 2

, wenn Sie definieren eine neue Methode in einer Komponente (Object) reagieren, wie wir wissen, Funktionen Objekt sind in Javascript.

let reactComponent={ 
addition: function(){ //some task ...}, 
render: function(){}, 
componentWillMount : function(){}, 
} 

so sollte jede neue Methode mit bind im Objekt binden verwenden, aber render() bereits definiert ist, so dass wir nicht tun

this.render = this.render.bind(this) 

für jede neue Funktion, mit der Ausnahme reagieren Lifecycle Methoden müssen hinzugefügt werden, und daher rufen wir die Objekt (Konstruktorfunktion) -Methoden mit this.method() auf.