Javascript ReactJS 中的导出（默认）类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34840708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Export (default) class in ReactJS
提问by Cheese Puffs
If I'm creating a component, it seems you can create a class in a lot of different ways. What is the difference between these? How do I know which one to use?
如果我正在创建一个组件，您似乎可以通过多种不同的方式创建一个类。这些有什么区别？我怎么知道要使用哪一个？
import React, {Component} from 'react'
export default class Header extends Component {
}
export const Header = React.createClass({
})
export default React.createClass({
})
I'm just assuming they do different things, or is it just different syntax?
我只是假设他们做不同的事情，或者只是不同的语法？
If someone could give me a quick explanation, or a link, I would really appreciate it. I don't want to start out with a new framework not knowing exactly what the difference is.
如果有人能给我一个快速的解释或链接，我将不胜感激。我不想从一个不知道有什么区别的新框架开始。
回答by Nick Ball
Hi and welcome to React!
嗨，欢迎来到 React！
I think part of what you're having trouble with here is not really React-specific, but instead related to the new ES2015 module syntax. When creating React class components, for most intents and purposes you can think of React.createClassas functionally equivalent to class MyComponent extends React.Component. One is just using the new ES2015 class syntax whereas the other is using the pre-ES2015 syntax.
我认为您在这里遇到的部分问题并不是真正特定于 React 的，而是与新的 ES2015 模块语法有关。在创建 React 类组件时，对于大多数意图和目的，您可以将其React.createClass视为在功能上等同于class MyComponent extends React.Component. 一种是使用新的 ES2015 类语法，而另一种是使用 ES2015 之前的语法。
For learning about modules, I'd recommend reading a few articles on the new module syntax to get familiar with it. Here's a good one to start with: http://www.2ality.com/2014/09/es6-modules-final.html.
为了学习模块，我建议阅读一些关于新模块语法的文章以熟悉它。这是一个很好的开始：http: //www.2ality.com/2014/09/es6-modules-final.html。
So in short, these are just differences in syntax, but I'll attempt to do a quick walk-through:
简而言之，这些只是语法上的差异，但我将尝试进行快速演练：
/**
* This is how you import stuff. In this case you're actually
* importing two things: React itself and just the "Component"
* part from React. Importing the "Component" part by itself makes it
* so that you can do something like:
*
* class MyComponent extends Component ...
*
* instead of...
*
* class MyComponent extends React.Component
*
* Also note the comma below
*/
import React, {Component} from 'react';
/**
* This is a "default" export. That means when you import
* this module you can do so without needing a specific module
* name or brackets, e.g.
*
* import Header from './header';
*
* instead of...
*
* import { Header } from './header';
*/
export default class Header extends Component {
}
/**
* This is a named export. That means you must explicitly
* import "Header" when importing this module, e.g.
*
* import { Header } from './header';
*
* instead of...
*
* import Header from './header';
*/
export const Header = React.createClass({
})
/**
* This is another "default" export, only just with a
* little more shorthand syntax. It'd be functionally
* equivalent to doing:
*
* const MyClass = React.createClass({ ... });
* export default MyClass;
*/
export default React.createClass({
})
