Considere el código React declarado dentro de LoremComponent.tsx a continuación:
const foo = "bar"; export default (props) => { return ( <h1>{foo}</h1> ) }¿Cuál es la vida útil de la variable foo -
Creo que, fundamentalmente, confundes React con un marco que administra tu código por ti, en realidad, React es simplemente una biblioteca y solo proporciona funciones auxiliares para representar cosas en el DOM (o de otra manera). React no tiene voz en el ciclo de vida de las variables y la gestión de la memoria, eso lo maneja únicamente el motor JavaScript como V8 o SpiderMonkey.
Si LoremComponent.tsx no se importa en ningún lugar, ¿esta variable no se declarará dentro de la memoria? Si no se importa de ningún sitio no se ejecutará. Esto no tiene nada que ver con React, si no se importa desde ningún lugar y no es el punto de entrada de la aplicación, es probable que su paquete (webpack, paquete, resumen, etc.) simplemente lo ignore y el código nunca se ejecutará.
Si el componente se importa en otro componente, ¿cuál será la vida útil de la variable foo? Cualquier código JavaScript en el archivo se ejecutará normalmente, incluida la declaración de la variable foo . Esto solo sucederá una vez. foo se aislará en su propio ámbito y otros archivos no podrán acceder a él a menos que se exporte.
¿O hasta que se ejecute la aplicación React? React no tiene voz en lo que sucede con las variables no administradas directamente por React (es decir useState ). Si la "aplicación React" se está "ejecutando" o no, no puede afectar otros aspectos de su aplicación JavaScript en general.
A diferencia de Angular y Vue, técnicamente no existe un "archivo de componente React", puede tener archivos jsx/tsx que contengan uno o más componentes React, pero técnicamente es solo un archivo JavaScript normal transpilado con Babel o TypeScript, el archivo exporta funciones o clases que la biblioteca React puede usar.