Les références (refs) sont une fonctionnalité de React qui permet d’accéder et d’interagir directement avec une composante DOM (Document Object Model) ou un élément d’une composante, dans le code React. Les refs sont utilisées lorsque vous avez besoin de l’interaction directe avec un élément. Par exemple, vous pouvez vouloir changer sa valeur, ou déclencher une méthode sur l’objet d’instance du composant.
Pour utiliser une ref dans React, vous suivez généralement ces étapes:
1. Dans la méthode `constructor()` de votre composant, vous créez une nouvelle ref en utilisant `React.createRef()` et l’attachez à une propriété d’instance. Par exemple :
\`\`\`javascript
constructor(props) {
super(props);
this.myRef = React.createRef();
}
\`\`\`
1. Dans votre méthode `render()`, vous attachez cette ref à votre élément DOM ou à la composante en utilisant l’attribut `ref`. Par exemple :
\`\`\`javascript
render() {
return
Il est important de noter que la modification directe des DOMs est généralement découragée en React en faveur de l’utilisation de l’état et des props. L’utilisation de refs est considérée comme un échappatoire (une “escape hatch”) dans les situations où vous avez vraiment besoin de cette fonctionnalité.
En effet, les refs exposent les nœuds DOM et les instances de composants à votre code, et peuvent donc le rendre plus compliqué et plus difficile à raisonner, à cause de l’introduction d’un état mutable implicite dans votre code. Il faut les utiliser de manière judicieuse et éviter autant que possible de les utiliser pour ce qui peut être fait avec des props et un état.
