Que signifie réagir un composant incontrôlé ?

Dans React, 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 du composant, il sera encapsulé en tant que composant non contrôlé uniquement lorsque le composant actuel est uniquement destiné à des fins d'affichage et ne fait aucune différence.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Que signifie un composant non contrôlé dans React ?

Qu'est-ce qu'un composant non contrôlé ? Commençons par deux mots, c'est-à-dire que le composant contrôlé et incontrôlé sont des concepts du point de vue des composants, le sens littéral est que le composant n'est pas contrôlé. par qui que ce soit. Bien sûr, il n'est pas contrôlé par le composant parent. Alors, quelles sont les caractéristiques du composant non contrôlé ? C'est-à-dire que toute la logique n'est liée qu'à elle-même et qu'il n'y a pas de communication ou d'intersection avec d'autres composants. , forment des éléments comme, et conserveront leur propre état et se mettront à 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 le

Exemple

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
    render() {
        return (
            <input />
            //<ABC />
        )
    }
}
ReactDOM.render(<Demo1/>, document.getElementById(&#39;content&#39;))

.

Explication des composants non contrôlés

Puisque le composant non contrôlé est un composant qui n'a pas d'intersection avec le monde extérieur, alors nous n'avons pas besoin d'utiliser le composant non contrôlé, la réponse est non, nous utilisons en fait le composant non contrôlé

Composant carrousel (non contrôlé) dans certaines circonstances. Pensez-y si notre page a besoin d'un composant carrousel et que le composant l'utilise uniquement. Nous n'avons pas l'intention de le réutiliser pour le moment. Nous mettons le code carrousel dans un composant carrousel. Le composant carrousel doit-il interagir avec le monde extérieur ? Non, nous écrivons alors un carrousel qui s'exécute quelle que soit l'image actuelle du carrousel, y compris les événements de clic. Lorsque l'heure du carrousel et d'autres conditions sont codées en dur, le composant carrousel est incontrôlé. Bien sûr, cet exemple est un peu tiré par les cheveux. Lors de la fabrication de composants, nous devons vouloir un composant universel et reproductible. Pour les composants réutilisés, nous devons connaître l'état actuel du carrousel, ce qui signifie que nos composants non contrôlés ne le sont pas. ne convient plus au 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 les écrire séparément à partir de fichiers, les performances peuvent être meilleures après l'empaquetage, mais si une certaine page de notre projet est statique. page, avons-nous utilisé nos composants non contrôlés ? La page affichée n'a pas d'encapsulation et ne peut être qu'une page personnalisée, alors lorsque notre composant de page existe seul, c'est un composant non contrôlé. pour transmettre une valeur et n'a aucune intersection avec le composant parent du composant actuel. Dans notre cas, lors de l'encapsulation d'un composant, il sera encapsulé en tant que composant non contrôlé uniquement lorsque le composant actuel est uniquement à des fins d'affichage et qu'il n'y a pas de différence.

Connaissances approfondies :

Qu'est-ce qu'un composant contrôlé

Nous en parlerons. Les composants non contrôlés sont le contraire. Le sens littéral est qu'ils sont contrôlés et contrôlés par le composant parent. Ils sont appelés composants contrôlés. . La manière dont le composant parent contrôle les composants enfants est bien sûr contrôlée par le passage des valeurs. Les accessoires sont transmis lorsque la valeur est utilisée par un 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 le composant parent

Par exemple

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value=&#39;123&#39; />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

Nous ne regardons pas l'entrée En tant que composant d'entrée, nous devons considérer l'entrée comme tout composant que nous référençons ou encapsulons par Une fois que ce composant a reçu une valeur, même s'il s'agit d'une chaîne fixe transmise par nous, il s'agit toujours d'un composant contrôlé par essence. Contrôlé Le composant ne vérifie pas s'il existe une liaison bidirectionnelle des données, mais s'il s'agit d'une liaison bidirectionnelle. est essentiellement contrôlé. Lorsque nous transmettons une valeur fixe, la valeur du composant d'entrée est fixe et ne peut pas être modifiée, bien que la valeur soit codée en dur lorsque nous transmettons les accessoires, 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 sera très probablement des composants contrôlés, après tout, la demande de pages statiques est encore faible. Notre js gère la plupart de la logique. le temps, et cette logique doit être interactive

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 nous de contrôler le composant Liaison bidirectionnelle des données : en fait, lorsque nous transmettons une valeur à l'attribut value Ou, la signification du composant est transformée en composant contrôlé. , mais lorsque nous lions onChange, onChange donne à notre composant une méthode de rappel lorsque les données changent. Dans la méthode de rappel, nous utilisons setState pour modifier les données, restituant ainsi, il s'agit d'une liaison bidirectionnelle de données, de lecteurs de données. la vue, et la vue détermine 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

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!