En réaction, un composant non contrôlé est un composant qui n'est pas contrôlé par son composant parent ; un composant non contrôlé est un composant indépendant qui n'a pas besoin de transmettre de valeur et n'a aucune intersection avec le composant parent du composant actuel lors de l'encapsulation. un composant, uniquement Le composant actuel sera encapsulé en tant que composant non contrôlé lorsqu'il est uniquement utilisé à des fins d'affichage et ne fait aucune différence.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
Qu'est-ce qu'un composant non contrôlé ?
Nous commençons par deux mots, c'est-à-dire composant. Contrôlé et non contrôlé sont des concepts du point de vue des composants. Le sens littéral est que les composants ne sont pas contrôlés, ni contrôlés par personne, bien sûr pas par le composant parent. les caractéristiques des composants non contrôlés ? Autrement dit, toute logique est uniquement liée à elle-même et n'a aucune communication ni intersection avec d'autres composants.
En HTML, formez des éléments tels que , et conservez leur propre état et mettez-les à jour en fonction des entrées de l'utilisateur. Mais dans React, ces composants sont tous des composants non contrôlés sans traitement, car lorsque vous les utilisez réellement, vous constaterez que ces composants ne mettront pas automatiquement à jour la valeur. La valeur que nous saisissons sans aucun traitement est impossible d'obtenir la valeur saisie en utilisant.
Exemple
importer React, { Component } depuis 'react'; importer ReactDOM depuis 'react-dom';class Demo1 extends Component { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('content'))Explication des composants non contrôlés
Puisqu’un composant non contrôlé est un composant qui n’a aucune intersection avec le monde extérieur, nous ne pouvons alors plus utiliser de composants non contrôlés. La réponse est non. Nous pouvons en fait utiliser des composants non contrôlés dans certaines circonstances.
Composant carrousel (non contrôlé), réfléchissez si notre page a besoin d'un composant carrousel, et le composant n'est utilisé qu'une seule fois et n'est pas destiné à être réutilisé. Nous mettons le code carrousel dans un composant carrousel. Il n'est pas nécessaire d'interagir avec le monde extérieur, donc lorsque le composant carrousel que nous écrivons est codé en dur quelle que soit la façon dont le graphique du carrousel actuel s'exécute, y compris les événements de clic, la durée du carrousel et d'autres conditions, alors le composant carrousel est un composant non contrôlé. Bien sûr, cet exemple est un peu tiré par les cheveux. Lorsque nous fabriquons des composants, nous devons vouloir un composant universel et réutilisable. Nous avons besoin de connaître l'état actuel du carrousel, ce qui fera que nos composants non contrôlés ne seront plus applicables.
Développement de pages statiques. Lors du développement de pages statiques, nous n'utilisons généralement pas de frameworks et utilisons uniquement du HTML pour écrire des fichiers séparés. Les performances peuvent être meilleures après l'empaquetage. Mais si une certaine page de notre projet est une page statique, l'utiliserons-nous ? Les pages affichées par nos composants non contrôlés n'ont pas d'encapsulation et ne peuvent être que des pages personnalisées. Lorsque nos composants de page existent seuls, ce sont des composants non contrôlés.
Un composant non contrôlé est un composant indépendant qui n'a pas besoin de transmettre de valeur et n'a aucune intersection avec le composant parent du composant actuel. Lorsque nous encapsulons le composant, il ne sera utilisé que lorsque le composant actuel est uniquement à des fins d'affichage. et il n'y a aucune différence. Encapsulé en tant que composant non contrôlé.
Élargissez vos connaissances :
Qu'est-ce qu'un composant contrôlé ?
C'est l'opposé d'un composant non contrôlé. Cela signifie littéralement un composant contrôlé par un composant parent. C'est ce qu'on appelle un composant contrôlé.
La façon dont le composant parent contrôle le composant enfant est bien sûr contrôlée par la transmission de valeurs lorsque la valeur des accessoires est utilisée par le composant enfant et que le contenu, la méthode ou le résultat d'affichage du composant enfant est modifié en raison de la valeur transmise par le composant parent. , le composant enfant est un composant contrôlé contrôlé par les composants parents
Exemple
importer React,{Component} depuis 'react'; importer ReactDOM depuis 'react-dom';class Input extends Component{ constructor(){ super(); =>{ let val = event.target.value; this.setState({val}) } render(){ return ( <div> <p>{this.state.val}</p> //<input type= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //Input est un composant contrôlé contrôlé par les propriétés de l'objet d'état </ div> ) }}ReactDOM.render(<Input/>,window.app)Nous ne devons pas considérer l'entrée comme un composant d'entrée. Nous devons considérer l'entrée comme tout composant que nous référençons ou encapsulons nous-mêmes. Une fois que nous avons transmis une valeur à ce composant, même s'il s'agit d'une chaîne fixe que nous avons transmise, elle reste essentiellement la valeur. Comme le composant d'entrée, les composants contrôlés ne vérifient pas s'il existe une liaison bidirectionnelle des données, mais si elles sont de nature contrôlée. Lorsque nous transmettons une valeur fixe, la valeur du composant d'entrée est fixe et ne peut pas. être modifié, bien que nous transmettions des accessoires, c'est une valeur codée en dur, mais cette valeur contrôle toujours le composant d'entrée.
Explication des composants contrôlés
Les composants contrôlés apparaissent en fait dans tous les aspects de notre programmation. Tout composant que nous supprimons seul est très probablement un composant contrôlé. Après tout, la demande de pages statiques est encore faible et notre js gère la logique la plupart du temps. doit être interactif.
Par exemple, le code du composant inpu ci-dessus est équivalent aux composants textarea et select. Nous devons tous transmettre certains paramètres (accessoires) pour informer les règles de rendu spécifiques et afficher le contenu du composant. Par exemple, l'attribut type est également un moyen. pour que nous puissions contrôler le composant.
Liaison bidirectionnelle des données : en fait, lorsque nous transmettons une valeur ou un attribut à value, la signification du composant a été modifiée en un composant contrôlé, mais lorsque nous lions onChange, une modification des données est donnée à notre composant via onChange. Dans la méthode de rappel, nous modifions les données via setState pour effectuer un nouveau rendu. Il s'agit de la liaison bidirectionnelle des données qui pilote la vue, et la vue pilote les données.
Résumé : Les composants contrôlés et les composants non contrôlés sont un concept qui indique si le composant actuel est contrôlé et s'il s'agit d'un composant distinct qui n'a aucune interaction avec d'autres contenus. En termes simples, un composant complètement indépendant peut être considéré comme un composant non contrôlé, tous les autres. les composants sont contrôlés