ECMAScript 6 箭头函数

IT技术 javascript reactjs ecmascript-6
2021-04-17 21:51:14 
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>
)

为什么函数参数用花括号括起来，而函数体只用括号括起来？

3个回答

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

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

奖励：箭头函数不同于函数声明和函数表达式的一种方式是，在箭头函数中（即使是具有非简洁主体的函数）， 和 的值arguments与this包含范围相同。因此，使用.callor调用箭头函数.apply将无效，如果您希望箭头函数采用可变数量的参数，则需要使用 rest 参数。

@TA3connect()返回一个函数，该函数本身使用值 AddTodo 调用。阅读您正在使用的库的文档，以确切了解该代码的作用。
2021-05-26 21:51:14
AddTodo = connect()(AddTodo) 你能解释一下这里发生了什么吗？
2021-05-29 21:51:14
2021-06-03 21:51:14
只是为了补充上面解释得很好的答案，这里有一篇关于参数解构的好文章：leanpub.com/understandinges6/...
2021-06-11 21:51:14

括在括号中的函数体返回括在括号中的表达式的值。

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

用一个例子来展示它。

参数解构：

在这里您可以看到，虽然 logEmployee 函数接受两个参数，但我们仅将员工对象作为代码的一部分传入。我们没有传递单个参数。因此，在运行时，员工对象的内容被提取以匹配函数期望的参数并相应地传入。

const employee = {
 id: 1,
 name: "John",
 age: 28
}

const logEmployee = ({name, age}) => (
  console.log(name, age)
)

logEmployee(employee);

请注意，该函数只需要姓名和年龄，因此只有这两个属性将从员工对象中解构。

其它你可能感兴趣的问题
上一篇React (HTML) 视频标签不会在移动设备上自动播放 下一篇React 路由器直接链接不适用于 Azure Web App Linux