2016-11-28 3 views
1

ich wie einen Code etwas gesehen haben, während das Lernen ReagierenJavascript ES6 Unterschied zwischen() =>() und() => {}

const LinkCell = ({rowIndex, data, col, ...props}) => (
    <Cell {...props}> 
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a> 
    </Cell> 
); 

Auch bisher dachte ich, dass in ES6 Funktion Stenografie ist

let sum = (a, b)=>{ 
    return a + b; 
} 

Wie unterscheidet sich die erste von der zweiten?

+0

die zweite auch geschrieben werden kann - 'lassen Summe = (a, b) => a + b;' –

+0

Mit '() =>() 'Der zweite Satz von Klammern dient zum Gruppieren, also benötigt er nicht das Schlüsselwort' return', das Sie mit '{}' brauchen würden. – nnnnnn

+2

@nnnnnn '() => (...)' ist für Reacts JSX. Es bedeutet JSX, wenn ich mich nicht irre. Aber '=> {...}' erzeugt einen neuen Block mit Anweisungen, während '=> (...)' wie '=> {return (...)}' ist. Der Wert nach dem Pfeil ist der zurückgegebene Wert, es sei denn, Sie erstellen einen neuen Block - implizit. – Li357

Antwort

1

mit der() =>() -Syntax stellen Sie sich vor, wenn es eine implizite Rückkehr Statment z.() => {return()}

+1

Es wäre sehr nützlich, die korrekte Terminologie für dieses Formular bereitzustellen, das "prägnanter Körper" ist. –

2

() =>() ist eine Einstrich-Kurzschrift von () => { doSomething() OR return; }.

Auch immer, wenn Sie mehr Manipulationen benötigen und benötigen mehr als eine Zeile Anweisung, sollten Sie für () => {} Syntax gehen sonst können Sie eine Kurz Syntax () =>()

Die folgende verwenden auch als eine Zeile Anweisung behandelt. Aber die Verwendung mit () =>() Syntax, müssen Sie es neu zu schreiben, ohne return Aussage,

// The below one line statement can be rewritten as below 
if (true) return something; 

// rewritten of above one 
() => (a > b ? a : b) 

// one line statement 
if (true) invoke(); // This will go like,() => (a ? a.invoke() : b.invoke()) 

// one line statement 
for(var i in results) doSomething(); 

//And your jsx statement which can be tread as one liner 
<Cell {...props}> 
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a> 
    </Cell> 
+0

'(...) => (...);' dient zum Zurückgeben von JSX in zustandslosen Komponenten in React. Es ist äquivalent zu '(...) => {return (...); } '. '(...)' bedeutet JSX. – Li357

+0

yeah einverstanden, diese 'jsx' wird wie eine Zeile-Anweisung behandelt wie' if (true) invoke(); ' – Aruna

+0

Danke für die Erklärung. Leider glaube ich, dass ich nicht mit meinem derzeitigen Ruf abstimmen kann. –

Verwandte Themen