请解释这个缩写的 ES6 JSX 声明

Question

SurviveJS 手册中有关 React 和 Webpack 的章节中的一个示例让我感到困惑。

在Note.jsx:

import React from 'react';

export default () => <div>Learn Webpack</div>;

这在许多方面与使用 JSX 声明 React 组件的标准方式有所不同：

import React from 'react';
class Note extends React.Component {
  render() {
    return <div>Learn Webpack</div>;
  }
}

第一个例子是如何工作的？

1. 它如何知道该组件被称为Note，以便在某些父组件中可以将其称为<Note/>？只需通过文件名匹配（删除.jsx 部分？）
2. render() 函数在哪里？又怎么可能省略呢？
3. 这种方法的局限性是什么？我猜它只适用于包装一个非常简单的渲染输出，只是将属性映射到一些 HTML...
4. 这种风格记录在哪里？我似乎找不到任何official documentation

Answer 1

1. 它不会，当您执行 <Note /> 时，它只是在本地范围内寻找名为 Note 的变量。当组件被导入另一个文件时，您可以随意命名。例如import Note from './Note'; 将在您的示例中导入默认导出的函数。

2. 这是一个无状态的函数组件，https://facebook.github.io/react/docs/reusable-components.html#stateless-functions，你链接到自己。函数本身是render，它没有类实例。

3. 它们不能存储任何状态，因为它们只接受输入并呈现输出。

4. 您的具体示例只是一个箭头函数。上面链接的文档使用标准的非箭头函数，但在这种情况下它们本质上是可以互换的。例如

   export default () => <div>Learn Webpack</div>;
   

   和

   一样

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