Quelle est la différence entre les composants contrôlés par réaction et les composants non contrôlés

La différence entre les composants contrôlés et les composants non contrôlés dans React : 1. Les composants contrôlés dépendent de l'état, tandis que les composants non contrôlés ne sont pas contrôlés par l'état ; 2. Les composants contrôlés ne peuvent avoir un état que s'ils héritent de "React.Component", les composants non contrôlés le font. ne pas avoir d'état uniquement par héritage ;3. Les composants contrôlés sont généralement utilisés lorsque les valeurs initiales doivent être définies dynamiquement, et les composants non contrôlés sont généralement utilisés lorsqu'il n'y a pas d'informations de valeur initiale dynamique.

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

La différence entre les composants contrôlés et les composants non contrôlés dans React

La différence entre les deux

1 Les composants contrôlés

Les composants contrôlés dépendent de l'état

Les modifications des composants contrôlés seront mappées aux valeurs d'état. en temps réel À ce moment, le contenu d'entrée peut être vérifié

Le composant contrôlé ne peut avoir un état que s'il hérite de React.Component

Le composant contrôlé doit utiliser l'événement onChange sur le formulaire pour lier l'événement correspondant

2. Composants non contrôlés

Les composants non contrôlés ne sont pas contrôlés par l'état

Obtenir des données à partir de composants non contrôlés équivaut à faire fonctionner DOM

Les composants non contrôlés peuvent être facilement combinés avec des composants tiers, et il est plus facile d'intégrer React et non-React à en même temps Code

Choisissez des composants contrôlés ou non contrôlés

1. Scénarios d'utilisation de composants contrôlés : Généralement utilisé dans les situations où sa valeur initiale doit être définie dynamiquement. Par exemple : lors de la modification de certaines informations du formulaire, l'élément du formulaire de saisie doit initialement afficher une certaine valeur renvoyée par le serveur, puis la modifier.

2. Scénarios d'utilisation de composants non contrôlés : généralement utilisés lorsqu'il n'y a pas d'informations de valeur initiale dynamique. Par exemple : lors de la création d'informations dans un formulaire, aucun des éléments du formulaire de saisie n'a de valeurs initiales et ne nécessite une saisie de l'utilisateur.

Connaissances étendues :

1. Composants contrôlés

En HTML, les changements de valeur des balises d'élément de formulaire d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3, 221f08282418e2996498697df914ce4e, etc. . renouveler.

Dans React, l'état mutable est généralement conservé dans la propriété state du composant et ne peut être mis à jour qu'à l'aide de setState(), et le composant React qui restitue le formulaire contrôle également ce qui se passe dans ce formulaire lors des entrées ultérieures de l'utilisateur. La valeur d'un élément de formulaire de saisie contrôlé par React est appelée un composant contrôlé.

Par exemple, liez un événement onChange à l'entrée de l'élément de formulaire. Lorsque l'état de l'entrée change, l'événement onChange sera déclenché, mettant ainsi à jour l'état du composant.

import React, { Component } from 'react'
export default class MyInput extends Component{
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
  }
  handleChange = (event)=>{
    this.setState({
        value: event.target.value
    })
  }
  render(){
    return(
      <div>
          <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
           />
      </div>
    )
  }
}

Le processus de mise à jour de l'état des composants contrôlés

1. Vous pouvez définir la valeur par défaut du formulaire dans l'état initial

2 Chaque fois que la valeur du formulaire change, appelez le gestionnaire d'événements onChange

3. le gestionnaire d'événements passe L'événement de l'objet événement obtient l'état modifié et met à jour l'état du composant

4 Une fois l'état mis à jour via la méthode setState, il déclenchera le nouveau rendu de la vue et terminera la mise à jour du composant de formulaire.

Dans React, les données circulent dans un seul élément. Dans l'exemple, vous pouvez voir que les données du formulaire proviennent de l'état du composant et sont transmises via des accessoires. C'est également ce qu'on appelle la liaison de données unidirectionnelle. Ensuite, les nouvelles données sont réécrites dans l'état via le gestionnaire d'événements onChange, complétant ainsi la liaison de données bidirectionnelle.

2. Composants non contrôlés

Les composants non contrôlés font référence aux données du formulaire traitées par le DOM lui-même. Autrement dit, il n'est pas contrôlé par setState(). Il est similaire à la saisie d'un formulaire HTML traditionnel. La valeur d'entrée affiche la dernière valeur.

Dans les composants non contrôlés, vous pouvez utiliser une référence pour obtenir la valeur du formulaire du DOM.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    console.log('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Les composants non contrôlés conservent leur propre état en interne pendant l'implémentation sous-jacente, de sorte que toute valeur saisie par l'utilisateur puisse être reflétée sur l'élément.

【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!