ReactJS 中的导出(默认)类 [英] Export (default) class in ReactJS

问题描述

如果我正在创建一个组件，您似乎可以通过多种不同的方式创建一个类.这些有什么区别?我怎么知道使用哪个?

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.

推荐答案

欢迎来到 React！

Hi and welcome to React!

我认为您在这里遇到的部分问题并不是真正特定于 React 的，而是与新的 ES2015 模块语法有关.在创建 React 类组件时，对于大多数意图和目的，您可以将 React.createClass 视为在功能上等同于 class MyComponent extends React.Component.一种是使用新的 ES2015 类语法，另一种是使用 ES2015 之前的语法.

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.

要了解模块，我建议您阅读一些有关新模块语法的文章以熟悉它.这是一个很好的开始:http://www.2ality.com/2014/09/es6-modules-final.html.

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屋！