Maison >interface Web >js tutoriel >Maîtrisez la manipulation et les performances du DOM avec React useRef Hook
Lors de la création d'applications avec React, l'un des principaux défis auxquels les développeurs sont confrontés est la gestion de l'état et des performances des composants. Le hook useState de React est largement utilisé pour la gestion des états, mais il peut parfois provoquer des rendus inutiles. C’est là que le hook useRef devient inestimable. Cela nous permet d'interagir directement avec le DOM, de suivre les modifications et de stocker les valeurs sans déclencher de nouveaux rendus de composants.
Dans ce guide, nous explorerons le hook useRef étape par étape, couvrant son objectif, ses avantages et ses cas d'utilisation courants. À la fin, même un débutant sera capable d'implémenter useRef en toute confiance pour résoudre divers défis dans ses applications React.
Le hook useRef fait partie de l’API principale des hooks de React. Il renvoie un objet mutable avec une propriété .current, qui peut être utilisée pour stocker n'importe quelle valeur souhaitée. Contrairement à l'état, la modification de la valeur .current n'entraîne pas le nouveau rendu du composant.
Voici la syntaxe simple pour useRef :
const myRef = useRef(initialValue);
Dans React, les changements d'état déclenchent de nouveaux rendus. Pour les applications dont les performances sont critiques, des rendus excessifs peuvent ralentir l'application. Prenons un exemple.
const MyComponent = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); console.log("Button clicked"); }; return ( <div> <p>{count}</p> <button onClick={handleClick}>Increment</button> </div> ); };
Dans cet exemple, cliquer sur le bouton entraînera le nouveau rendu du composant entier, même si vous ne vous souciez peut-être que de la mise à jour de données spécifiques comme le nombre.
Avec useRef, nous pouvons stocker des valeurs sans provoquer de nouveaux rendus inutiles.
const MyComponent = () => { const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log("Button clicked, count: ", countRef.current); }; return ( <div> <button onClick={handleClick}>Increment</button> </div> ); };
Dans cet exemple, nous incrémentons countRef.current sans déclencher de nouveau rendu, car React ne restitue pas lorsque useRef change.
La nature déclarative de React élimine les manipulations directes du DOM. Mais il y a des moments où nous devons accéder directement aux éléments du DOM, comme par exemple focaliser un champ de saisie ou faire défiler jusqu'à une section particulière. C'est là que useRef vient à la rescousse.
const myRef = useRef(initialValue);
Dans cet exemple, nous attribuons inputRef à l'attribut ref du champ de saisie. La fonction handleFocus est appelée lorsque vous cliquez sur le bouton, ce qui nous permet de focaliser par programme le champ de saisie à l'aide de inputRef.current.focus().
Parfois, vous devez suivre les valeurs au fil du temps sans déclencher un nouveau rendu. Un cas d'utilisation courant consiste à suivre l'état précédent d'une variable.
const MyComponent = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); console.log("Button clicked"); }; return ( <div> <p>{count}</p> <button onClick={handleClick}>Increment</button> </div> ); };
Dans cet exemple, nous utilisons useRef pour stocker la valeur précédente. Le composant s'affiche avec la valeur actuelle, mais la valeur précédente est stockée dans prevValueRef.current et ne déclenche pas de nouveau rendu.
Non, la modification d'un objet useRef ne provoque pas de nouveau rendu. Ce comportement rend useRef parfait pour stocker les valeurs que vous devez conserver dans les rendus mais que vous ne souhaitez pas utiliser dans le cadre de la logique de rendu.
const MyComponent = () => { const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log("Button clicked, count: ", countRef.current); }; return ( <div> <button onClick={handleClick}>Increment</button> </div> ); };
Dans cet exemple, même si nous modifions renderCountRef.current à chaque nouveau rendu, cela ne provoque aucun nouveau rendu.
Construisons un exemple plus avancé dans lequel nous comptons le nombre de fois où un bouton est cliqué sans provoquer de nouveaux rendus.
const FocusInput = () => { const inputRef = useRef(null); const handleFocus = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={handleFocus}>Focus Input</button> </div> ); };
Dans ce cas, le nombre de clics du bouton est suivi via clickCountRef.current, mais React ne restitue pas le composant.
N'oubliez pas d'initialiser votre référence avec une valeur ou null.
const PreviousStateExample = ({ value }) => { const prevValueRef = useRef(); useEffect(() => { prevValueRef.current = value; }, [value]); const prevValue = prevValueRef.current; return ( <div> <p>Current Value: {value}</p> <p>Previous Value: {prevValue}</p> </div> ); };
N'utilisez pas useRef comme substitut à useState. useRef ne doit être utilisé que pour les valeurs qui n'affectent pas le rendu. Si la valeur affecte l'affichage du composant, utilisez useState.
const NoRenderOnRefChange = () => { const renderCountRef = useRef(0); useEffect(() => { renderCountRef.current += 1; console.log("Component re-rendered:", renderCountRef.current); }); return <p>Check the console for render count</p>; };
Utilisez useRef lorsque vous devez stocker une valeur mutable sans déclencher un nouveau rendu. Pour les valeurs qui affectent l'interface utilisateur, utilisez useState.
Oui, vous pouvez utiliser useRef pour stocker les valeurs précédentes sans déclencher de nouveaux rendus, mais n'oubliez pas de mettre à jour la référence dans useEffect.
Non, la modification de useRef.current ne provoque pas de nouveaux rendus. C'est pourquoi il est idéal pour les scénarios dans lesquels vous souhaitez éviter les mises à jour inutiles.
Attribuez useRef à l'attribut ref d'un élément DOM, vous pourrez alors accéder à l'élément DOM via ref.current.
Le hook useRef est un outil polyvalent et puissant dans React qui permet aux développeurs de stocker des valeurs, de suivre les états précédents et d'interagir avec les éléments DOM sans provoquer de nouveaux rendus. De la gestion du nombre de clics à la concentration des entrées, useRef ouvre des opportunités pour optimiser les performances et fournir des solutions plus propres et plus efficaces. Avec ce guide, vous disposez désormais des connaissances nécessaires pour implémenter useRef dans divers scénarios, des cas d'utilisation de niveau débutant aux applications plus avancées.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!