3

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. 这种风格在哪里记录？我似乎找不到任何官方 文档
4

1 回答 1

7

  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>;
}
于 2016-01-21T05:15:02.427 回答