Cuando creo componentes en React, todos están en una carpeta llamada component y cada componente tiene una carpeta dedicada con el mismo nombre que el componente en sí, por ejemplo, ../components/Input .
Pero una gran preocupación es el nombre de los archivos. Para evitar tener rutas largas, nombro el componente dentro de la carpeta Index.tsx para que cuando importe, solo tenga ../components/Input ; de lo contrario, sería una ruta de importación muy fea como ../components/Input/Input .
Entonces, al nombrar Index.tsx , en mi IDE, termino teniendo demasiados archivos de índice abiertos y luego me pierdo.
Entonces, lo que hice fue cambiar el nombre del archivo de todos esos componentes con el mismo nombre que la carpeta Input.tsx y exportarlos usando exportación con nombre como export const Input:React.FC<InputProps>=(props)=>{...} , luego, en la raíz de mi carpeta de componentes, creé un archivo index.tsx donde exporto todos esos componentes para que, al importarlos en mis páginas, pueda escribir import {Input} from "../components" .
Me gusta este enfoque, pero mi siguiente preocupación es el movimiento de los árboles. Porque no quiero importar cada vez toda la biblioteca de componentes.
Entonces, con el enfoque anterior, ¿React maneja automáticamente el movimiento del árbol por nosotros?
Hay un tweet sobre los posibles problemas relacionados con la reexportación de todo con archivos de índice.
Si su proyecto tiene un archivo
components/index.jsque vuelve a exportar todos sus componentes (y no hace nada más), ese es un ejemplo.Esto es malo para el rendimiento, por dos razones.
Hace que la división de código sea ineficaz.
Cuando tu lo hagas
import { Button } from './components'está importando no solo el botón sino todo el archivo './components'. Lo que significa que está empaquetando todo el archivo, con todos los componentes que exporta.
Hace que la inicialización del paquete sea más costosa.
Cada vez que un navegador descarga el paquete, tiene que ejecutarlo, y también todos sus módulos. Si hay muchos módulos, o algunos de ellos hacen algo costoso, esto puede llevar un tiempo.
Alguien más sugiere configurar la opción sideEffects del paquete web para que la sacudida del árbol aún pueda optimizar el paquete tanto como sea posible.
Lo que sugiero es crear pequeños módulos de componentes dentro del directorio de components .
- components/ - Input/ # component module - index.ts # exports public API - Input.tsx # actual component implementation - Input.test.tsx - Input.scss - Input.stories.tsx - etc. Donde index.ts solo vuelve a exportar la API pública para este componente.
// index.ts export { Input } from './Input'; export type { InputProps } from './Input'; // etc.Para que tengamos rutas que no se repiten al importar, pero el nombre de archivo con el que realmente estamos trabajando se nombra de acuerdo con el componente.