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

Please explain this abbreviated ES6 JSX declaration

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

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

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

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

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

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

    与

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