Je voudrais stocker certaines variables dans un module (exportation) à utiliser comme constantes dans mon application react. Je voudrais éviter le contexte car il n'est pas nécessaire que les composants soient rendus à nouveau et j'ai également besoin que ces constantes soient utilisées en dehors de mes composants de réaction.
Où dois-je le faire (où l'importer), afin d'éviter le garbage collection?
Une idée que j'ai est de l'importer et de le réexporter par-dessus mon composant racine.
MODIFIER:
Pour être plus précis, il y aura un composant qui définira la constante une fois (mute la variable), afin que d'autres composants ou fichiers puissent y accéder.
3 Réponses :
Donc, vous aurez besoin d'une sorte de modèle setter / getter. Bien que je ne le recommande généralement pas à moins que vous ne sachiez ce que vous faites, car React ne sera pas restitué si la variable change et pour cette raison, vous devez être sûr que la variable est défini avant son utilisation .
Vous devriez avoir quelque chose comme l'exemple ci-dessous pour qu'il fonctionne comme vous le souhaitez. Vous pouvez trouver un exemple de son fonctionnement sur ce Codesandbox . p>
export let MY_VARIABLE = ""; export const setMyVariable = value => (MY_VARIABLE = value);
PS: J'ai ajouté un peu de console.log au code afin que vous puissiez voir comment l'importation / get / set se comporte. p>
Lorsque le composant est démonté (par exemple à partir du navigateur), ce module importé n'est-il pas récupéré?
Pouvez-vous expliquer pourquoi cela serait important? Pourquoi est-il important pour votre application qu'une constante ne soit pas récupérée?
Il existe un composant qui définira une seule fois une constante, afin que d'autres composants ou fichiers puissent y accéder.
Ce n'est donc pas une constante, veuillez modifier votre question avec ces informations et je mettrai à jour ma réponse.
Vérifiez la réponse mise à jour et l'implémentation de codesandbox pour voir si cela résout votre problème. :)
Alors, comment cela garantit-il que ma variable ne sera pas dé-référencée, donc garbage collecté?
Si vous l'importerez sur le point d'entrée de votre application, il devrait rester dans la mémoire applications, vous pouvez mettre à jour / obtenir la variable où vous voulez.
Je ne pense pas que l'importer au-dessus du point d'entrée soit correct. Je l'ai importé uniquement dans le composant d'écran de chargement (où j'ai défini la variable), puis je l'ai importé sur un autre composant et je peux voir la valeur correcte.
Oui, cela fonctionnera sur tout ce qui se trouve au-dessus du composant qui l'utilise.
Vous pouvez créer un config.js dans le dossier src et écrire votre variable constante comme
//config.js module.exports = { CONST_VAR: 'valeur const', }
importez config.js dans votre composant et utilisez-le
Lorsque le composant est démonté (par exemple à partir du navigateur), ce module importé n'est-il pas récupéré?
Après avoir approfondi ce sujet, j'ai trouvé que les spécifications du module es6 indiquent:
Lors de l'importation de votre module, il est chargé => analysé => évalué et mis en cache (singleton). Il indique également que lorsque vous importez des modules, sa valeur est transmise par référence (également appelée affectation). Je n'ai rien trouvé indiquant quand ou comment les modules es6 sont déchargés de ce cache.
Cela signifie que lorsque vous importez un module une fois, il est là aussi longtemps que le programme est en cours d'exécution, et tous les modules accèdent directement à ses valeurs.
référence
Tant qu'il existe des références actives à une variable, la variable ne sera pas récupérée
C'est exactement la question. Comment puis-je garantir qu'une référence existe, tant que mon application React s'exécute?
Je ne suis pas sûr de cela, mais pour autant que je sache, les exportations d'un module ne seront pas récupérées tant que le module reste chargé et je ne connais aucun moyen de décharger un module une fois qu'il a été chargé
@apokryfos Je pense que ce que vous dites est la bonne réponse. J'ai fourni ma propre réponse.