React 组件声明中“导出”的目的是什么？

Question

在 React (ES6) 中，为什么我有时会看到这个？...

class Hello extends React.Component { ... }

有时这个？

export class Hello extends React.Component { ... }

export 关键字的意义是什么？如果使用 webpack，是否需要对 webpack.config.js 文件进行任何更改？

任何有关这方面的信息将不胜感激，在此先感谢。

---

更新：

ma​​in-file.js

import React from 'react';
import ReactDOM from 'react-dom';

import { External } from './external';

class Hello extends React.Component {
  render() {
    return <div>

      <h1>Hello World (Main File this time)</h1>
      <External />

    </div>
  }
}

ReactDOM.render(<Hello/>, document.getElementById('main'));

external.js（同一目录）

export class External extends React.Component {
  render() {
    return <div>This is my external component</div>
  }
}

这不起作用 - 你知道为什么吗？？

Answer 1

在解释 export 关键字之前，让我先向您澄清一些事情。

---

正如您在互联网上看到的那样，在每个 React 应用程序中，您需要使用两个重要的东西：

1/ 通天塔

2/ webpack 或 browserify

说明

什么是 Babel 工作？

您可能听说过jsx 和ES6。

嗯，Babel 的工作是将jsx 转换为 js 并将 ES6 转换为 ES5，以便浏览器可以理解这两件事。

export 关键字是 ES6 中的一项新功能，让您可以导出您的 functions、variables，以便您可以在其他 js 文件中访问它们。

即：

hello.js

export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

world.js

import { Hello } from './hello';

class World extends React.Component {
  render() {
    return <div><Hello /> world</div>; // jsx sytanx.
  }
}

什么是 webpack 作业？

Webpack 是一个模块打包器。它接收一堆资产（即hello.js、world.js 和您的模块（react、react-dom....））并将其转换为一个文件。

即：

假设我们对webpack 有以下配置

// dont need to set hello.js as an entry because we already import it into world.js
module.exports = {

  entry: [
    './src/world.js'  
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  }
};

webpack 它将你所有的 js 文件和你的模块导入到一个单一的文件 bundle.js。

编辑：解决问题

在jsx，

始终将返回的 html 包装到 ()。

...
render() {
  return (
    <div>
      <h1>Hello World (Main File this time)</h1>
      <External />
    </div>
  )
}
...

Answer 2

导出值允许您将其导入到另一个文件中。

如果我从hello.js 文件中导出这个类：

// hello.js
export class Hello extends React.Component { ... }

然后我可以导入它并在greeting.js文件中使用它。

// greeting.js
import { Hello } from './hello';

export class Greeting extends React.Component {
  render() {
    return <Hello />;
  }
}

这并不特定于 React，您可以使用此语法在任何类型的 JavaScript 应用程序中导入和导出任何类型的值。

使用Babel 之类的工具将其转换为可以在浏览器中运行的代码后，您可以使用 Webpack 之类的工具将您使用过的所有模块捆绑到一个脚本文件中，供您使用浏览器。

这种用于导入和导出的模块语法还为导出“默认”值的模块提供了有用的简写。

// hello.js
export default class Hello extends React.Component { ... }

// greeting.js
import Hello from './hello';

如果您的模块只导出一个值，通常您会希望使用此表单。