ReactJS dışa aktarma (varsayılan) sınıfı

Question

Bileşen oluşturuyorsam, çok farklı yollarla bir sınıf oluşturabilirsiniz. Bunlar arasındaki fark nedir? Hangisini kullanacağımı nasıl bilebilirim?

import react {Component} from 'react' 

export default class Header extends component { 

} 

export const Header = React.createClass({ 

}) 

export default React.createClass({ 

}) 

Sadece farklı şeyler yaptığını farz ediyorum, yoksa sadece farklı sözdizimi mi?

Birisi bana hızlı bir açıklama veya bağlantı verebilirse, gerçekten çok memnun olurum. Farkın tam olarak ne olduğunu bilmeden yeni bir çerçeve ile başlamak istemiyorum.

Answer 1

Merhabalar ve React'a hoş geldiniz!

Burada sorun yaşadığınız şeyin bir kısmı gerçekten React-specific değil, bunun yerine yeni ES2015 modülünün sözdizimi ile ilgilidir. React sınıf bileşenleri oluştururken, çoğu amaç ve amaç için React.createClass'u class MyComponent extends React.Component'a işlevsel olarak eşdeğer olarak düşünebilirsiniz. Biri sadece yeni ES2015 sınıf sözdizimini kullanıyor, diğeri ise ES2015 öncesi sözdizimini kullanıyor.

Modüller hakkında bilgi edinmek için, yeni modül sözdizimini öğrenmek için birkaç makaleyi okumanızı öneririz. İşte başlamak için iyi bir tane: http://www.2ality.com/2014/09/es6-modules-final.html.

Yani kısacası, bu sözdiziminde sadece farklılıklar vardır, ama hızlı bir yürüyüş-through yapmak deneriz:

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

})