Importar React vs React, {Componente}

No dejes de divulgar nuestra web y códigos en tus redes sociales, necesitamos de tu ayuda para hacer crecer esta comunidad.

Solución:

import React, Component te permite hacer class Menu extends Component en vez de class Menu extends React.Component. Es menos tipeo y duplicación del espacio de nombres React, que generalmente es una convención de codificación moderna deseada.

Además, herramientas como Webpack 2 y Rollup hacen “sacudidas de árboles”, lo que significa que las exportaciones no utilizadas no se incluyen en el código final. Con import React/React.Component está garantizando que se incluirá todo el código fuente de React. Con import Component algunas herramientas solo incluirán el código necesario para usar el Component clase, excluyendo el resto de React.

El párrafo anterior es irrelevante en este caso específico, porque siempre necesita tener React en el espacio de nombres actual para escribir JSX, pero solo importar los módulos exactos que necesita en otros casos puede conducir a un código empaquetado más pequeño al final.

Más allá de eso, es una preferencia completamente personal.

Estos son importaciones con nombre o importaciones de espacios de nombres. Lo que hacen es básicamente copiar el contenido del módulo en el espacio de nombres, lo que permite:

import React,  Component  from 'react';

class SomeComponent extends Component  ... 

Normalmente, extenderíamos React.Componentpero dado que el módulo Component se importa al espacio de nombres, podemos hacer referencia a él con Component, React. no es necesario. Todos los módulos de React se importan, pero los módulos dentro de las llaves se importan de tal manera que el React espacio de nombres prefix no es necesario al acceder.

TLDR;

es una preferencia totalmente personal.

Solo una nota…

import React, Component te permite hacer class Menu extends Component
en vez de class Menu extends React.Component. Es menos escribir…

Si quieres escribir menos, entonces no importar componente además de React.

import React,  Component  from 'react';
class Menu from Component {

es más escribiendo que:

import React form 'react';
class Menu from React.Component {

incluso si considera la finalización automática. 😉

Reseñas y valoraciones

---

---

Utiliza Nuestro Buscador