2016-08-16 3 views
16

Ich habe einige JSX-Code in einer reagieren App wie diese bekommen:Was bedeutet :: (doppelter Doppelpunkt) in JavaScript?

... 
_renderSignOutLink() { 
    if (!this.props.currentUser) { 
     return false; 
    } 

    return (
     <a href="#" onClick={::this._handleSignOutClick}><i className="fa fa-sign-out"/> Sign out</a> 
    ); 
... 

Was bedeutet der Doppelpunkt, ::, bedeutet vor Aufruf der Funktion?

+2

http://StackOverflow.com/Questions/31220078/javascript-double-colon-es-7-proposal – dmoo

+3

Nicht Teil von JSX, sondern Teil von JS Proper –

+2

Würde dies nicht jedes Mal eine neue Funktionsinstanz erzeugen, die rendern heißt (was könnte eine Menge Zeit abhängig von Ihren Statusänderungen sein?) –

Antwort

21

Die :: ist a proposed binding operator, die in eine gebundene Funktion desugars:

::foo.bar 
// becomes 
foo.bar.bind(foo) 

Dies ist nützlich in React (und alle anderen Event-Handler), weil es bedeutet, this wird der erwartete Wert (Instanz der Klasse), wenn Der Event-Handler wird später aufgerufen.

+5

Nur ein paar Denkanstöße. Es wird nicht als gute Übung angesehen, Bindungen für Funktionsaufrufe an Komponenten in unseren Rendermethoden zu verwenden, da dies bei der Leistung zu Problemen führen kann. Hier sind einige Alternativen https://daveceddia.com/avoid-bind-when-passing-props/ – Justin

Verwandte Themen