web-dev-qa-db-fra.com

Classe d'exportation (par défaut) dans ReactJS

Si je crée un composant, il semble que vous puissiez créer une classe de nombreuses façons différentes. Quelle est la différence entre ceux-ci? Comment savoir lequel utiliser?

import React, {Component} from 'react'

export default class Header extends Component {

}

export const Header = React.createClass({

})

export default React.createClass({

})

Je suppose simplement qu'ils font des choses différentes, ou est-ce juste une syntaxe différente?

Si quelqu'un pouvait me donner une brève explication ou un lien, je l'apprécierais vraiment. Je ne veux pas commencer avec un nouveau cadre sans savoir exactement quelle est la différence.

javascriptsyntaxreactjsecmascript-6
45
Cheese Puffs

Bonjour et bienvenue pour réagir!

Je pense qu'une partie des problèmes que vous rencontrez ici n'est pas vraiment spécifique à React, mais plutôt liée à la nouvelle syntaxe du module ES2015. Lors de la création de composants de classe React), vous pouvez pratiquement penser à React.createClass comme équivalent fonctionnel à class MyComponent extends React.Component. L'une utilise simplement la nouvelle syntaxe de classe ES2015, tandis que l'autre utilise la syntaxe antérieure à ES2015.

Pour en savoir plus sur les modules, je vous conseillerais de lire quelques articles sur la nouvelle syntaxe de module afin de vous familiariser avec celle-ci. En voici une bonne pour commencer: http://www.2ality.com/2014/09/es6-modules-final.html .

En bref, ce ne sont que des différences de syntaxe, mais je vais essayer de faire un survol rapide:

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

})
105
Nick Ball