Eksportuj (domyślnie) klasa w ReactJS

Question

Jeśli tworzę komponent, wydaje się, że możesz stworzyć klasę na wiele różnych sposobów. Jaka jest różnica między nimi? Skąd mam wiedzieć, którego użyć?

import react {Component} from 'react' 

export default class Header extends component { 

} 

export const Header = React.createClass({ 

}) 

export default React.createClass({ 

}) 

Ja tylko przy założeniu, że robią różne rzeczy, czy jest to tylko inna składnia?

Jeśli ktoś mógłby dać mi szybkie wyjaśnienie lub link, byłbym bardzo wdzięczny. Nie chcę zaczynać od nowych ram, nie wiedząc dokładnie, na czym polega różnica.

Answer 1

Witam i zapraszam do reakcji!

Myślę, że część tego, z czym masz problem, nie jest w rzeczywistości specyficzna dla React, ale jest związana z nową składnią modułu ES2015. Podczas tworzenia komponentów klasy React dla większości celów i celów można pomyśleć o React.createClass jako funkcjonalnie równoważnym class MyComponent extends React.Component. Jeden używa właśnie nowej składni klasy ES2015, podczas gdy drugi używa składni przed ES2015.

Aby zapoznać się z modułami, polecam lekturę kilku artykułów na temat składni nowego modułu, aby się z nim zapoznać. Oto dobry początek: http://www.2ality.com/2014/09/es6-modules-final.html.

Tak w skrócie, są to tylko różnice w składni, ale będę próbować zrobić szybkie przechodni:

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

})