Javascript ReactJS/ES6：两个代码块之间的等价性

我目前正在阅读ReactJS教程，我发现一个特别的速记法我不太懂

export default ({task}) => <div>{task}</div>;

导出默认值（{task}）=>{task}；

作者给出了上面这行代码，作为我在下面编写的代码的简写，我相信它们的工作方式是相同的

export default class Note extends Component {
    render() {
        return <div>{this.props.task}</div>;
   } 
}

导出默认类注释扩展组件{
render（）{
返回{this.props.task}；
} 
}

---

我试图查找React文档，以了解如何处理速记，但收效甚微。任何帮助都将不胜感激。

您可以使用下面提到的babel链接，其中提到了ES5和ES6中的所有不同之处

---

根据部件文档：

您还可以将React类定义为普通JavaScript函数。例如，使用无状态函数语法

所以在您的例子中，它是有效的，因为您只使用了一个普通函数而不是类。这里的ES2015语法基本上可以翻译为：

export default function(task) {
    return <div>{task}</div>;
};

导出默认功能（任务）{
返回{task}；
};

好的，这很有意义。为了澄清，在给出的示例中，

props

作为参数传递给无状态函数，而在我的示例中，

{task}

作为参数传递。你能解释一下为什么会这样吗？没关系！这只是ES2015中引入的解构功能！谢谢你的资源！