请解释这个缩写的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. 这种风格记录在哪里？我似乎无法找到任何官方 文件

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>;
   }