Javascript ES6 ()=>() 和 ()=>{} 之间的区别 [重复]答案

【问题标题】：Javascript ES6 Difference between ()=>() and ()=>{} [duplicate]Javascript ES6 ()=>() 和 ()=>{} 之间的区别 [重复]
【发布时间】：2017-04-11 16:52:48
【问题描述】：

我在学习 React 时看到过类似的代码

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

另外，到目前为止，我认为在 ES6 中的函数简写是

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

第一个和第二个有什么不同？

【问题讨论】：

第二个也可以写-let sum = (a, b)=> a + b;
()=>() 的第二组括号用于分组，因此它不需要{} 所需的return 关键字。
@nnnnnn () => (...) 用于 React 的 JSX。如果我没记错的话，它表示 JSX。但是=> {...} 创建了一个带有语句的新块，而=> (...) 就像=> { return (...) }。除非您创建一个新块，否则箭头后面的值是返回值 - 隐式。
@AndrewLi - 我不使用 JSX，但 ()=>() 在普通 (ES6) JS 中完全有效（假设你实际上在第二个括号内放了一些东西）。
@AndrewLi：(...) 与 JSX 无关。它们似乎只是为了可读性而添加的。它们也可以在不改变功能的情况下省略。

标签： javascript reactjs ecmascript-6 react-jsx

【解决方案1】：

() => () 是() => { doSomething() OR return; } 的单行简写。

无论如何，如果您需要更多操作并且需要多行语句，您应该使用() => {} 语法，否则您可以使用简写语法() => ()

以下也被视为一行语句。但是要使用() => ()语法，你需要在没有return语句的情况下重写它，

// 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>

【讨论】：

(...) => (...); 用于在 React 的无状态组件中返回 JSX。它相当于(...) => { return (...); }。 (...) 表示 JSX。
是的，同意，这个jsx被视为一行语句，例如if (true ) invoke();
感谢您的解释。不幸的是，我认为我不能以我目前的声誉投票。
"() => () 是 () => { doSomething() OR return; } 的单行简写。" 不，它相当于@ 987654333@.

【解决方案2】：

使用 ()=> () 语法想象是否存在隐式返回语句，例如() => {return ()}

【讨论】：

为这个表单提供正确的术语是非常有用的，即“简洁的正文”。