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.
Questions connexes
Questions liées
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.