小编典典

ECMAScript 6箭头功能

reactjs

var getTempItem = id => ({ id: id, name: "Temp" });

我知道上面的箭头功能等效于:

var getTempItem = function(id) {

    return {
        id: id,
        name: "Temp"
   };
};

但是我对以下内容有些困惑

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
 </li>
)

为什么函数参数用大括号括起来,而函数主体仅用括号括起来?


阅读 285

收藏
2020-07-22

共1个答案

小编典典

ES6的一些语法糖元素在这里起作用:

  • 参数解构 :该函数实际上使用一个对象,但是在执行该函数之前,将其唯一的对象参数解构为三个变量。基本上,如果传递给函数的参数称为obj,则为onClick变量分配obj.onClick的值,并与其他命名的分解变量相同。
  • 简洁的箭头主体 :只需一个表达式的箭头函数就可以使用简洁的形式。例如,x => 2 * x是一个箭头函数,返回其输入乘以2。但是,ES6语法规范指出,箭头后的花括号必须解释为语句块。因此,为了使用简洁的主体返回对象,必须将对象表达式括在括号中。
  • JSX :括号通常用于需要跨越多行的JSX表达式。

奖励:箭头函数与函数声明和函数表达式不同的一种方式是,在箭头函数(即使是具有非简洁主体的箭头函数)中,和的值argumentsthis包含范围相同。因此,使用.call或调用箭头函数.apply无效,如果希望箭头函数采用可变数量的参数,则需要使用rest参数。

2020-07-22