React: Question: Peut-on utiliser useMemo à la place de useRef?
Salut, juste par curiosité, vous pouvez utiliser useMemo au lieu de useRef en procédant comme suit:
Exemple:
const ref = useRef(null);
const ref2 = useMemo(() => { current: null }, []);
Il me semble que les deux références fonctionneront très bien en tant que référence DOM et en tant que valeur mutable similaire aux champs d'instance dans les classes. Pourquoi alors useRef est implémenté différemment par rapport à useMemo compte tenu du code useRef et useMemo ?
Merci!
svsool
Tous les 3 commentaires
Vous pouvez créer un objet ref de cette façon, mais ce serait moins efficace puisque useMemo suit et compare également les dépendances. (Même si vous spécifiez un tableau de dépendances vide, la structure de données sous-jacente d'un crochet mémo a de l'espace pour la valeur supplémentaire.)
Pour illustrer cela, vous pouvez comparer l'implémentation de useRef :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920
À useMemo :
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156
Étant donné que les deux crochets sont fréquemment utilisés, il est important qu'ils fonctionnent de manière optimale: sourire: ils sont donc implémentés différemment.
bvaughn
le 3 févr. 2020
Vous _pourriez_ créer un objet ref de cette façon, mais ce serait moins efficace puisque
useMemosuit et compare également les dépendances. (Même si vous spécifiez un tableau de dépendances vide, la structure de données sous-jacente d'un crochet mémo a de l'espace pour la valeur supplémentaire.)Pour illustrer cela, vous pouvez comparer l'implémentation de
useRef:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920À
useMemo:
https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156Étant donné que les deux hooks sont fréquemment utilisés, il est important qu'ils fonctionnent de manière optimale 😄 afin qu'ils soient implémentés différemment.
salut, comment formater le code comme ça?
yaofly2012
le 21 sept. 2020
@ yaofly2012 GitHub formate les liens de cette façon, si vous
- Ouvrir un fichier
- Cliquez sur un numéro de ligne
- Maintenez SHIFT et cliquez sur un autre numéro de ligne pour sélectionner une plage
- Tapez "y" pour épingler la révision actuelle
- Copiez et collez l'URL sur GitHub
bvaughn
le 21 sept. 2020
Questions connexes
hnordt
·
3Commentaires
h1orz
·
3Commentaires
krave1986
·
3Commentaires
DimitarChristoff
·
3Commentaires
bloodyowl
·
3Commentaires
Commentaire le plus utile
Vous pouvez créer un objet ref de cette façon, mais ce serait moins efficace puisque
useMemosuit et compare également les dépendances. (Même si vous spécifiez un tableau de dépendances vide, la structure de données sous-jacente d'un crochet mémo a de l'espace pour la valeur supplémentaire.)Pour illustrer cela, vous pouvez comparer l'implémentation de
useRef:https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L907 -L920
À
useMemo:https://github.com/facebook/react/blob/434770c3b4b94315c789234c27ed9dc2ec8a78ad/packages/react-reconciler/src/ReactFiberHooks.js#L1126 -L1156
Étant donné que les deux crochets sont fréquemment utilisés, il est important qu'ils fonctionnent de manière optimale: sourire: ils sont donc implémentés différemment.