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

ReactJS/ES6: Equivalence between two blocks of code

本文关键字：之间 代码 两个 ES6 ReactJS      更新时间：2023-09-26

我目前正在学习这里给出的ReactJS教程，我观察到了一个我无法完全理解的特殊简写。

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

作者给出了上面的代码行作为我在下面写的代码的简写，我相信它的工作原理也是一样的。

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

我试着查阅React文档来了解速记是如何处理的，但收效甚微。如有任何帮助，我们将不胜感激。

根据组件"无状态函数"的文档：

您也可以将React类定义为一个简单的JavaScript函数。例如，使用无状态函数语法。。。

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

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

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

babel

相关文章：