Quelle est la différence entre ces deux déclarations
import React from 'react';
Et
import React, { Component } from 'react';
Ne devrait-on pas importer React depuis 'react' importer tout, y compris le contenu? Que dois-je lire pour comprendre cela?
6 réponses
Vous pouvez lire à ce sujet ici.
Importer quelque chose sans accolades importe tout ce qui a été défini comme default export dans le module à partir duquel vous importez. Il ne peut y avoir qu'une seule (ou aucune) exportation par défaut dans un module.
foo.js :
const myObject = {foo: 'bar'};
export default myObject;
bar.js :
import theObject from './foo';
console.log(theObject);
// prints {foo: 'bar'}
// note that default exports are not named and can be imported with another name
L'importation avec des accolades importe ce qui a été exporté en tant qu'export nommé avec ce nom par le module. Il peut y avoir plusieurs exportations nommées dans un module.
foo.js :
export const myObject = {foo: 'bar'};
export const anotherObject = {bar: 'baz'};
bar.js :
import {myObject, anotherObject, theObject} from './foo';
console.log(myObject);
// prints {foo: 'bar'}
console.log(anotherObject);
// prints {bar: 'baz'}
console.log(theObject);
// prints undefined
// because nothing named "theObject" was exported from foo.js
Cela se résume principalement à la façon dont vous exportez des variables. Je crois que cela doit être une décision de conception délibérée de la part des contributeurs Facebook.
export default class ReactExample {}
export class ComponentExample {}
export class ComponentExampleTwo {}Dans l'exemple ci-dessus, ReactExample peut être importé sans utiliser {}, où en tant que ComponentExample, ComponentExampleTwo, vous devez importer à l'aide d'instructions {}.
La meilleure façon de comprendre est de parcourir le code source.
Réagir le code source d'exportation
Code source de React Component
João Belo a publié une excellente réponse à lire, mais je vais ajouter une chose. la deuxième instance utilise la déstructuration et le raccourci objet pour saisir la valeur de la propriété 'Component' du module react et l'affecter à une variable 'Component' que vous pouvez utiliser localement. Si vous ne connaissez pas la déstructuration et la sténographie d'objet, vous devriez certainement les rechercher. Ils sont utiles.
Avec
import React, { Component } from 'react';
Tu peux faire
class Menu extends Component { /* ... */ }
Au lieu de
class Menu extends React.Component { /* ... */ }
À partir de ceci: Importer React vs React, {Component}
Voici l'ES6.
import Raect, { Component } from 'react';
Comme
import default_export, { named_export } from 'react';
Considérez deux fichiers. Person.js comme
const person = {
name: 'johon doe'
}
export default person; // default export
Utility.js comme
export const clean = () => { ... } //named export using const keyword
export const baseData = 10; //named export using const keyword
Importer dans le fichier App.js. comme
import person from './Person';
import prs from './Person';
import {clean} from './Utility';
import {baseData} from './Utility';
import {data as baseData} from './Utility';
import {* as bundled} from './Utility';
//bundled.baseData
//bundled.clean
import * as myCode from './../../myCode';
Cela insère myCode dans la portée actuelle, contenant toutes les exportations du module dans le fichier situé dans ./../../myCode.
import React, { Component } from 'react';
class myComponent extends Component { ... }
En utilisant la syntaxe ci-dessus, votre bundler (par exemple: webpack) groupera toujours la dépendance ENTIRE mais puisque le module Component est importé de cette manière en utilisant { } dans l'espace de noms, nous pouvons simplement le référencer avec {{ X2}} au lieu de React.Component.
Pour plus d'informations, vous pouvez lire les documentation du module mozilla ES6.