React: Comprendre l'instruction d'importation

Question

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?

javascript reactjs

6

user9504869 14 avril 2018 à 03:07

Answer 1

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

4

trixn 14 avril 2018 à 00:31

Answer 2

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

0

Sreekanth 14 avril 2018 à 00:17

Answer 3

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.

1

Devin Fields 14 avril 2018 à 00:12

Answer 4

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}

4

trixn 14 avril 2018 à 00:38

Answer 5

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

2

Ikram - Ud - Daula 14 avril 2018 à 08:07

Answer 6

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.

0

Aaqib 14 avril 2018 à 00:26

React: Comprendre l'instruction d'importation

6 réponses

Questions connexes

Questions liées

De nouvelles questions

javascript