ReactJS / ES6：两段代码

Question

我目前正在阅读here给出的ReactJS教程，我观察到了一个我无法理解的特殊速记。

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

作者将上述代码行作为下面编写的代码的简写，我认为这些代码的工作方式相同。

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

我试图查找React文档来弄清楚速记的处理方式，但效果不大。任何帮助将不胜感激。

Answer 1

根据组件"Stateless Functions"的文档：

  

您也可以将React类定义为纯JavaScript函数。例如，使用无状态函数语法...

所以在你的情况下，它是有效的，因为你只使用普通函数而不是类。这里的ES2015语法基本上转换为：

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

Answer 2

你可以使用下面提到的babel链接，提到ES5和ES6之间的所有不同

babel