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

Question

React和Webpack一章中SurviveJS手册中的一个例子令我感到困惑。

在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. 您的具体示例只是一个箭头功能。上面链接的文档使用标准的非箭头函数，但在这种情况下它们基本上是可互换的。 e.g。

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

   与

   相同

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