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

Question

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

class Hello extends React.Component { ... }

有时这个？

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

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

任何关于此的信息将不胜感激,提前感谢.

---

更新:

主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关键字之前,请告诉我一些事情.

正如您在互联网上看到的那样,在每个反应应用程序中,您都需要使用两个重要的东西:

1/Babel

2/webpack或browserify

释

什么是巴贝尔工作？

你可能会听到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和你的模块(反应,反应......))并将其转换为单个文件.

i.e:

假设我们有以下配置 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文件和模块转换成onne单个文件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应用程序中导入和导出任何类型的值.

在您使用类似的工具通天把它变成可以在浏览器中运行的代码,那么你可以使用一个工具,如的WebPack捆绑你已经使用到一个单一的脚本文件中的所有模块,你可以用于浏览器.

导入和导出的此模块语法还为导出"默认"值的模块提供了有用的简写.

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

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

通常,如果模块只导出一个值,则需要使用此表单.