Exportieren (Standard) -Klasse in ReactJS

Question

Wenn ich eine Komponente erstellen, scheint es, Sie können eine Klasse auf viele verschiedene Arten erstellen. Was ist der Unterschied zwischen diesen? Woher weiß ich, welche zu verwenden?

Ich nehme nur an, dass sie verschiedene Dinge tun, oder ist es nur andere Syntax?

Wenn jemand mir eine kurze Erklärung oder einen Link geben könnte, würde ich es wirklich schätzen. Ich möchte nicht mit einem neuen Framework beginnen, ohne genau zu wissen, worin der Unterschied besteht.

Answer 1

Hallo und willkommen zu reagieren!

Ich denke, ein Teil von dem, was Sie hier Probleme haben, ist nicht wirklich React-spezifisch, sondern bezieht sich stattdessen auf die neue Syntax des ES2015-Moduls. Beim Erstellen von React-Klassenkomponenten können Sie sich für die meisten Absichten und Zwecke als funktionell äquivalent zu class MyComponent extends React.Component vorstellen. Die eine verwendet nur die neue ES2015-Klassensyntax, während die andere die pre-ES2015-Syntax verwendet.

Um mehr über Module zu erfahren, empfehle ich, einige Artikel über die neue Modul-Syntax zu lesen, um sich damit vertraut zu machen. Hier ist ein guter Anfang: http://www.2ality.com/2014/09/es6-modules-final.html.

Also kurz gesagt, das sind nur Unterschiede in der Syntax, aber ich werde einen schnellen Gang durch versuchen zu tun:

/** 
* 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({ 

})