ReactJS - Refs et le DOM

Bonjour, futurs développeurs React ! Aujourd'hui, nous allons plonger dans un sujet passionnant qui vous aidera à interagir directement avec des éléments du DOM dans vos applications React. Attachez vos ceintures, car nous allons explorer le monde des Refs et du DOM !

Qu'est-ce que les Refs ?

Avant de rentrer dans les détails, comprenstons ce qu'est un Ref. En React, "Ref" est l'abréviation de "référence". C'est comme donner un bracelet à un élément spécifique pour pouvoir le retrouver plus tard. Imaginez que vous êtes à une grande fête et que vous voulez garder un œil sur votre meilleur ami. Vous pourriez leur donner un chapeau spécial ou un bracelet unique. C'est essentiellement ce que fait un Ref dans React - il vous aide à suivre des éléments spécifiques.

Pourquoi avons-nous besoin de Refs ?

Vous vous demandez peut-être : "Pourquoi ne pouvons-nous pas simplement utiliser JavaScript classique pour sélectionner des éléments ?" Eh bien, en React, nous essayons d'éviter de manipuler directement le DOM (Document Object Model) car React a son propre moyen efficace de mettre à jour l'interface utilisateur. Cependant, il y a des moments où nous devons sortir du paradigme déclaratif de React et travailler directement avec des éléments du DOM. C'est là que les Refs deviennent utiles !

Créer des Refs avec createRef()

Commençons par voir comment nous créons un Ref dans React. Nous utilisons une méthode appelée createRef().

Signature de la méthode createRef

La signature de createRef() est assez simple :

React.createRef()

C'est tout ! Pas de paramètres, pas de complications. Elle renvoie un objet simple avec une seule propriété : current. Initialement, cette propriété current est définie sur null.

Voyons un exemple :

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}

render() {
return <div ref={this.myRef} />;
}
}

Dans cet exemple, nous créons un Ref dans le constructeur et le afectons à this.myRef. Ensuite, dans la méthode render, nous attachons ce Ref à un élément div en utilisant l'attribut ref.

Appliquer un ref

Maintenant que nous avons créé notre Ref, voyons comment nous pouvons l'utiliser. Il y a plusieurs façons d'appliquer un Ref :

1. Refs sur des éléments du DOM

Le cas d'utilisation le plus courant est d'appliquer un Ref à un élément du DOM :

class AutoFocusInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

componentDidMount() {
this.inputRef.current.focus();
}

render() {
return <input ref={this.inputRef} />;
}
}

Dans cet exemple, nous créons un Ref pour un élément input. Après que le composant est monté, nous utilisons le Ref pour focus automatiquement sur l'input. La propriété current du Ref nous donne accès au noeud DOM réel.

2. Refs sur des composants de classe

Vous pouvez également utiliser des Refs avec des composants de classe :

class AutoScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}

componentDidUpdate() {
const node = this.listRef.current;
node.scrollToItem(0);
}

render() {
return <MyListComponent ref={this.listRef} />;
}
}

Dans ce cas, this.listRef.current pointera vers l'instance de la classe MyListComponent.

3. Refs et composants fonctionnels

Les composants fonctionnels ne peuvent pas recevoir directement des Refs, mais vous pouvez utiliser la fonction forwardRef pour transmettre des Refs :

const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.buttonRef = React.createRef();
}

render() {
return <FancyButton ref={this.buttonRef}>Cliquez ici !</FancyButton>;
}
}

Dans cet exemple, FancyButton utilise forwardRef pour transmettre le Ref au véritable élément bouton.

Cas d'utilisation de createRef

Maintenant que nous savons comment créer et appliquer des Refs, voyons quelques cas d'utilisation courants :

1. Gérer le focus, la sélection de texte ou la lecture multimédia

class TextInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

focusTextInput = () => {
this.inputRef.current.focus();
}

render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.focusTextInput}>Focus sur l'input</button>
</div>
);
}
}

Ce composant nous permet de focus programmé sur l'input lorsque le bouton est cliqué.

2. Déclencher des animations impératives

class Animator extends React.Component {
constructor(props) {
super(props);
this.elementRef = React.createRef();
}

animate = () => {
this.elementRef.current.classList.add('animated');
}

render() {
return (
<div>
<div ref={this.elementRef}>Animez-moi !</div>
<button onClick={this.animate}>Démarrer l'animation</button>
</div>
);
}
}

Ici, nous utilisons un Ref pour ajouter une classe CSS à un élément, déclenchant une animation.

3. Intégrer avec des bibliothèques DOM tierces

class MapComponent extends React.Component {
constructor(props) {
super(props);
this.mapRef = React.createRef();
}

componentDidMount() {
const mapLibrary = new FancyMapLibrary();
mapLibrary.createMap(this.mapRef.current);
}

render() {
return <div ref={this.mapRef} style={{width: '100%', height: '400px'}} />;
}
}

Dans cet exemple, nous utilisons un Ref pour donner à une bibliothèque de carte tierce accès à un noeud DOM où elle peut afficher une carte.

Conclusion

Les Refs sont un outil puissant dans React qui nous permettent de sortir du paradigme déclaratif lorsque cela est nécessaire. Ils nous offrent un moyen d'accéder directement aux noeuds DOM ou aux éléments React. Cependant, il est important d'utiliser les Refs avec modération. Dans la plupart des cas, vous pouvez obtenir ce dont vous avez besoin via les API déclaratives de React. Mais lorsque vous avez besoin de ce contrôle supplémentaire, les Refs sont là pour vous aider !

Souvenez-vous, avec grand pouvoir vient grande responsabilité. Utilisez les Refs intelligemment, et vos applications React vous en remercieront !

Voici un tableau de référence rapide des méthodes que nous avons discutées :

Méthode	Description	Exemple
React.createRef()	Crée un objet ref	this.myRef = React.createRef();
Attribut ref	Attache un ref à un élément React	<div ref={this.myRef} />
forwardRef	Permet aux composants fonctionnels de recevoir des refs	const FancyButton = React.forwardRef((props, ref) => ...)

Bonne programmation, et puissent vos Refs toujours être à jour !

Credits: Image by storyset