Que sont les composants contrôlés et non contrôlés de React ?

Question

Que sont les composants contrôlés et les composants non contrôlés dans ReactJS ? En quoi diffèrent-ils l'un de l'autre ?

Answer 1

Cela concerne les composants DOM avec état (éléments de formulaire) et la documentation de React explique la différence :

• A Composant contrôlé est celui qui prend sa valeur actuelle par le biais de props et notifie les changements par le biais de rappels tels que onChange . Un composant parent le "contrôle" en s'occupant du rappel, en gérant son propre état et en transmettant les nouvelles valeurs en tant qu'accessoires au composant contrôlé. On peut aussi appeler cela un "composant muet".
• A Composant non contrôlé est celui qui stocke son propre état en interne, et vous interrogez le DOM à l'aide d'une commande ref pour trouver sa valeur actuelle lorsque vous en avez besoin. Cela ressemble un peu plus au HTML traditionnel.

La plupart des composants de formulaire React natifs prennent en charge l'utilisation contrôlée et non contrôlée :

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

Dans la plupart (ou la totalité) des cas vous devez utiliser des composants contrôlés .

Answer 2

Ils restituent tous deux les éléments du formulaire

Composant non contrôlé y Composant contrôlé sont des termes utilisés pour décrire les composants React qui effectuent un rendu Éléments de formulaire HTML . Chaque fois que vous créez un composant React qui rend un élément de formulaire HTML, vous créez l'un de ces deux éléments.

Composants non contrôlés y Composants contrôlés diffèrent dans la manière dont ils accèdent aux données de la éléments du formulaire ( <input> , <textarea> , <select> ).

Composants non contrôlés

Un composant non contrôlé est un composant qui rend les éléments de formulaire, où les données de l'élément de formulaire sont gérées par le DOM (comportement par défaut du DOM). Pour accéder au nœud DOM de l'entrée et en extraire la valeur, vous pouvez utiliser une balise ref .

Exemple - Composant non contrôlé :

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

Composants contrôlés

A composant contrôlé est un composant qui rend les éléments de formulaire et les contrôle en conservant les données du formulaire dans l'état du composant.

Dans un composant contrôlé les données de l'élément de formulaire sont gérées par le composant React (et non par le DOM) et conservées. dans l'état du composant . Un composant contrôlé remplace fondamentalement le comportement par défaut des éléments du formulaire HTML.

Nous créons un composant contrôlé en connectant l'élément de formulaire ( <input> , <textarea> o <select> ) au État en définissant son attribut value et l'événement onChange .

Exemple - Composant contrôlé :

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);

  return <input type="text" value={email} onChange={handleInput} />;
}

Answer 3

Le composant contrôlé est le composant qui reçoit la valeur modifiée de la fonction de rappel. et un composant non contrôlé est un composant qui reçoit la valeur du DOM. Par exemple, lorsque la valeur d'une entrée est modifiée, Lorsque la valeur d'entrée est modifiée, nous pouvons utiliser la fonction onChange dans le composant contrôlé et Nous pouvons également obtenir la valeur en utilisant le DOM comme ref.

Answer 4

Composant contrôlé : Les données du formulaire sont gérées par un composant React.

Le flux d'un composant contrôlé dans ReactJS image

Composants non contrôlés : sont gérées par le DOM lui-même.

Le flux d'un composant non contrôlé dans ReactJS image

Answer 5

Les composants contrôlés sont principalement ceux pour lesquels toute valeur de prop du composant provient soit du composant parent, soit du magasin (comme dans le cas de redux). Exemple :

<ControlledComp value={this.props.fromParent}/>

Dans le cas d'un composant non contrôlé, la valeur du composant peut être tirée de l'état du composant en fonction du traitement de l'événement. Exemple :

<UncontrolledComp value={this.state.independentValue}/>