在ReactJS中导出（默认）类 [英] Export (default) class in ReactJS
问题描述
我刚刚开始，我一直在看一些教程和视频，我不知道我明白这部分是如何工作的。
如果我'创建一个组件，好像你可以用很多不同的方式创建一个类。这些有什么区别？我如何知道要使用哪一个？
import'Component'from'react'
导出默认类标题扩展组件{
}
export const Header = React.createClass（{
}）
export default React.createClass（{
}）
只是假设做不同的事情，还是只是不同的语法？
如果有人可以给我一个快速的解释，或者一个链接，我真的很感激。我不想从一个新框架开始，不知道究竟有什么区别。
您好，欢迎来到React ！
我认为您在这里遇到麻烦的部分不是真正的反应特定，而是与新的ES2015模块语法相关。当创建React类组件时，对于大多数意图和目的，您可以将 React.createClass 功能等同于 class MyComponent extends React.Component 。一个是使用新的ES2015类语法，而另一个使用ES2015之前的语法。
有关模块的学习，我建议您阅读有关新的模块语法来熟悉它。这是一个很好的开始： http://www.2ality.com/2014/09/ ES6模块-final.html 。
简而言之，这些只是语法上的差异，但我会尝试快速浏览：
/ **
*这是你如何导入东西。在这种情况下，您实际上是
*导入两件事情：反应本身并且仅仅是来自React的Component
*部分。导入组件部分本身使其成为
*，以便您可以执行以下操作：
*
* class MyComponent extends Component ...
*
*而不是...
*
* class MyComponent extends React.Component
*
*另请注意下面的逗号
* /
import react，{组件} from'react';
/ **
*这是一个默认导出。这意味着当您导入
*此模块时，您可以这样做，而无需使用特定模块
*名称或括号，例如
*
* import'./header'的头文件
*
*而不是...
*
* import {Header} from'./header';
* /
导出默认类标题扩展组件{
}
/ **
*这是一个命名导出。这意味着您在导入此模块时必须明确显示
* importHeader。
*
* import {Header} from'./header';
*
*而不是...
*
*导入'./header'的标头;
* /
export const Header = React.createClass（{
}）
/ **
*这是另一个默认出口，只有一个
*一点更多的速记语法。它的功能是
*相当于做：
*
* const MyClass = React.createClass（{...}）;
*导出默认MyClass;
* /
导出默认值React.createClass（{
}）
hope you all are having a good weekend. I have just started out and I've been looking at some tutorials and videos and I'm not sure I understand how this part works.
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 the do different things, or is it just different syntax?
If someone could give me a quick explaination, or a link i would really appreciated. I don't want to start out with a new framework not knowing exactly what the difference is.
Hi and welcome to 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.createClass as 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.
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.
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({
})
这篇关于在ReactJS中导出（默认）类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
