react 组件导出

前段时间忙于公司的招聘，导致react学习停滞了一段时间。今天通过react官方文档在本地创建了一个项目，把里面的文件自己重新开发。遇到了一个有意思的问题

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to 1231231231</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
export default App;
这是官方文档自带的代码，在app.js里面，然后在index.js 引入 import App form './app'；然后可以页面可以正常展示；这个export default App 是导出组件，然后在别的文件引入就可以直接使用。但是我看其它的项目不是每一个文件都使用了 export 
default 进行导出。而是直接在定义组件的使用直接使用

export default class App extends React.Component {}
同样在别的页面也可以直接使用。
下面这种方式一般是默认组件的导出方式，自定义组件更多的使用第一种方式。
扩展

没有加default时，例如：

export default Template{};

当然，你可以在单个js文件里声明多个组件，例如Templates.js

export class Template{}

export class OtherTemplate{}

这样在其他文件引用时，需要使用{}符号且组件名称必修和class名称一样，像这样子：

import {Template,OtherTemplate} from './component/Template';

而加default时，例如：

export default class Template{};

export class OtherTemplate{};

然后在其他文件引用，像这样子：

import Template，｛OtherTemplate｝ from './component/Templates';  //从Templates引入组件将其命名为Template,以及引入OtherTemplate非默认组件

但是每个文件里只能有一个default组件，可以包含其他多个非default组件：