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


Bir bileşen oluşturuyorsam, bir çok farklı şekilde bir sınıf oluşturabiliyorsunuz. 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ıklarını mı varsayıyorum yoksa farklı bir sözdizimi mi?

Birisi bana hızlı bir açıklama ya da bir bağlantı verebilirse, bunu gerçekten takdir ediyorum. Farkın tam olarak ne olduğunu bilmeden yeni bir çerçeve ile başlamak istemiyorum.


36
2018-01-17 16:34


Menşei




Cevaplar:


Merhaba ve React hoş geldiniz!

Burada sorun yaşadığınız şeyin bir kısmı React'a özgü değil, bunun yerine yeni ES2015 modülünün sözdizimi ile ilgili. React sınıf bileşenleri oluştururken, çoğu amaç ve amaç için düşünebilirsiniz React.createClass işlevsel olarak eşdeğer olarak class MyComponent extends React.Component. 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özdizimine aşina olmak için birkaç makale okumanızı tavsiye ederim. İşte başlamak için iyi bir tane: http://www.2ality.com/2014/09/es6-modules-final.html.

Kısacası, bunlar sadece sözdizimindeki farklılıklardır, ancak hızlı bir şekilde yürümeyi deneyeceğim:

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

})

83
2018-01-17 17:28



Bu modüller hakkında iyi bir makale: hacks.mozilla.org/2015/08/es6-in-depth-modules - Clauds