Подтвердить что ты не робот

Экспорт (по умолчанию) класса в ReactJS

Если я создаю компонент, кажется, что вы можете создать класс по-разному. В чем разница между ними? Как узнать, какой из них использовать?

import react {Component} from 'react'

export default class Header extends component {

}

export const Header = React.createClass({

})

export default React.createClass({

})

Я просто предполагаю, что они делают разные вещи, или это просто другой синтаксис?

Если кто-то может дать мне краткое объяснение или ссылку, я был бы очень признателен. Я не хочу начинать с новой структуры, не зная точно, в чем разница.

Ответ 1

Привет и добро пожаловать в React!

Я думаю, что часть того, с чем у вас возникают проблемы, на самом деле не зависит от конкретного ответа, а связана с новым синтаксисом модуля ES2015. При создании компонентов класса React для большинства целей и целей вы можете думать о React.createClass как функционально эквивалентном class MyComponent extends React.Component. Один из них просто использует новый синтаксис класса ES2015, тогда как другой использует синтаксис pre-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({

})