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

102

Que sont les composants contrôlés et les composants non contrôlés dans ReactJS? En quoi diffèrent-ils les uns des autres?

reactjs react-component Xin
la source
21
Nomination pour rouvrir. C'est en fait une question assez précise. Je ne sais pas comment cela peut être considéré comme trop large.
Charlie Flowers

Réponses:

127

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

  • Un composant contrôlé est un composant qui prend sa valeur actuelle propset notifie les modifications via des rappels comme onChange. Un composant parent le «contrôle» en gérant le rappel, en gérant son propre état et en passant les nouvelles valeurs comme accessoires au composant contrôlé. Vous pouvez également appeler cela un "composant stupide".
  • Un composant incontrôlé est un composant qui stocke son propre état en interne, et vous interrogez le DOM en utilisant a refpour 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 une 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 tous) des cas, vous devez utiliser des composants contrôlés .

Aaron Beall
la source
1
La valeur n'est-elle pas prise en compte stateplutôt que props?
Ivanka Todorova
9
@IvankaTodorova Pour un composant contrôlé, la valeur est transmise props. Un composant incontrôlé utiliserait statepour contrôler la valeur elle-même en interne. C'est la principale différence.
Aaron Beall
1
La différence entre eux est que les composants dont la valeur est définie / transmise et qui ont un rappel sont appelés controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) par rapport au HTML traditionnel où un élément d'entrée gère sa propre valeur et peut être lu via refsappelé uncontrolled components( <value type="text" />). Les composants contrôlés gèrent leur propre état via setStateou l'obtiennent de leur composant parent comme accessoires.
Lior Elrom
Comment appelleriez-vous un composant qui le fait passer defaultValuepar des accessoires, mais qui avertit le contrôleur onBlur?
Paul Razvan Berg
@PaulRazvanBerg Cela ressemble à un anti-modèle, l' état doit être contrôlé en un seul endroit . Habituellement, vous lèverez l'état à l'ancêtre commun le plus proche.
Aaron Beall du
1
  • Les composants contrôlés informent les autres composants des modifications à l'aide de rappels. Par exemple: <Button onClick={() => console.log("clicked")}>Click</Button>.
  • Les composants incontrôlés ne notifient pas les autres composants de leurs modifications et vous ne pouvez accéder aux composants qu'en utilisant ref-s. Ref peut être utile si vous avez besoin d'accéder au domaine réel d'un élément HTML
shobe
la source