在 ReactJS 中导出(默认）类

Export (default) class in ReactJS

本文关键字：默认 ReactJS      更新时间：2023-09-26

如果我正在创建一个组件，似乎你可以用很多不同的方式创建一个类。这两者之间有什么区别？我怎么知道要使用哪一个？

import React, {Component} from 'react'
export default class Header extends Component {
}
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-modules-final.html。

简而言之，这些只是语法上的差异，但我会尝试做一个快速演练：

/**
 * 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({
})
相关文章：