Disons que nous utilisons React avec ES6. Nous importons React et Component en tant que
import React from 'react'
import { Component } from 'react'
Pourquoi la différence de syntaxe? Ne pouvons-nous pas utiliser comme spécifié ci-dessous?
import Component from 'react'
Voici les docs pour import
.
import React from 'react'
Ce qui précède est une importation par défaut. Les importations par défaut sont exportées avec export default ...
. Il ne peut y avoir qu'une seule exportation par défaut.
import { Component } from 'react'
Mais ceci est une importation de membre (nommée importation). Les importations de membres sont exportées avec export ...
. Il peut y avoir de nombreuses exportations de membres.
Vous pouvez importer les deux en utilisant cette syntaxe:
import React, { Component } from 'react';
En JavaScript, les importations par défaut et nommées sont fractionnées, vous ne pouvez donc pas importer une importation nommée comme si c'était la valeur par défaut. Ce qui suit définit le nom Component
sur l'exportation par défaut du package 'react'
(qui ne sera pas identique à React.Component
:
import Component from 'react';
Le composant est une exportation nommée. par exemple. Par conséquent, il doit être déstructuré avec {}.
React est une exportation par défaut pour React à partir de 'react' est correct. par exemple. Exporter par défaut Réagir
Si, dans un fichier, vous exportez quelque chose par défaut avec une instruction telle que export default React
, vous pouvez l'importer comme import React
.
Pour les autres exportations qui ne sont pas par défaut, nous devons spécifier ce que nous voulons réellement importer en le fermant entre parenthèses comme import { Components}
.