Différence entre la syntaxe import React et import { Component }.

Question

Disons que nous utilisons React avec ES6. Nous importons React et Component comme

import React from 'react'
import { Component } from 'react'

Pourquoi cette différence de syntaxe ? Ne pouvons-nous pas utiliser comme indiqué ci-dessous ?

import Component from 'react'

Answer 1

Voici les docs para import .

import React from 'react'

L'exemple ci-dessus 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 il s'agit d'une importation membre (importation nommée). Les importations membres sont exportées avec export ... . Il peut y avoir plusieurs exportations 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 séparées. Vous ne pouvez donc pas importer une importation nommée comme si elle était par défaut. L'exemple suivant définit le nom Component à l'exportation par défaut de l 'react' (ce qui ne sera pas la même chose que React.Component :

import Component from 'react';

Answer 2

Le composant est une exportation nommée. Par exemple, il doit donc être déstructuré avec {}.

React est un export par défaut pour React à partir de 'react' est correct. ex. export default React

Answer 3

Si dans un fichier vous exportez quelque chose par défaut avec une déclaration du type export default React alors cela peut être importé comme import React .

Pour les autres exportations qui ne sont pas par défaut, nous devons préciser ce que nous voulons réellement importer en le fermant entre parenthèses, comme suit import { Components} .