ReactJS / ES6：两个代码块之间的等效性[重复]答案

【问题标题】：ReactJS/ES6: Equivalence between two blocks of code [duplicate]ReactJS / ES6：两个代码块之间的等效性[重复]
【发布时间】：2015-12-29 07:41:50
【问题描述】：

我目前正在阅读给定 here 的 ReactJS 教程，并且我发现了一个我无法完全遵循的特定速记。

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

作者将上面的代码行作为我在下面编写的代码的简写，我相信它的工作方式相同。

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

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

【问题讨论】：

【解决方案1】：

根据组件文档"Stateless Functions"：

你也可以将你的 React 类定义为一个普通的 JavaScript 函数。例如使用无状态函数语法 ...

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

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

【讨论】：

好的，这是有道理的。为了澄清起见，在给出的示例中，props 作为参数传递给无状态函数，而在我的示例中，{task} 作为参数传递。你能解释一下为什么会这样吗？
没关系！这只是 ES2015 中引入的解构特性！

【解决方案2】：

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

【讨论】：