Explication détaillée des instances de composants contrôlées et non contrôlées dans React

Dans cet article, nous partagerons avec vous une explication détaillée d'exemples de composants contrôlés et de composants non contrôlés dans React. Avant l'explication détaillée, nous présenterons brièvement ce que sont les composants contrôlés et les composants non contrôlés, dans l'espoir d'aider tout le monde.

Composant contrôlé

Dans React, chaque fois que l'état du formulaire change, il sera écrit dans l'état du composant. Ce type de composant est appelé Contrôlé dans React. composant . Dans un composant contrôlé, l'état de rendu du composant correspond à sa valeur ou coché. React élimine ainsi l'état local des composants. React recommande officiellement d'utiliser des composants contrôlés.

Processus d'état de mise à jour des composants contrôlés :

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时，调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
4. setState触发视图的重新渲染，完成表单组件值得更新。

Composant non contrôlé

En termes simples, si un composant de formulaire n'a pas d'accessoires de valeur (boutons radio et cases à cocher La case correspond aux accessoires vérifiés), que l'on peut appeler composant non contrôlé. De cette façon, nous pouvons utiliser defaultValue et defaultChecked pour représenter l'état par défaut du composant.

Dans React, un composant non contrôlé est un anti-modèle. Sa valeur n'est pas contrôlée par le propre état ou les accessoires du composant. Vous devez généralement y ajouter un accessoire ref pour accéder au DOM sous-jacent rendu. . élément.

Comparaison des composants contrôlés et non contrôlés

Nous venons de voir que la valeur par défaut du formulaire est définie via defaultValue ou defaultChecked Il ne sera rendu qu'une seule fois. effet sur les rendus ultérieurs.

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {this.setState({value: e.target.value})}}
>

Dans le composant contrôlé, le contenu saisi dans le livre peut être sorti et affiché, tandis que dans le composant non contrôlé, si l'événement onChange n'est pas lié, nous saisissons n'importe quoi dans la zone de texte Aucun ne sera affiché. Vous pouvez voir que la plus grande différence entre les composants contrôlés et les composants non contrôlés est que l'état des composants non contrôlés n'est pas contrôlé par l'état de l'application. Il existe également des états de composants locaux dans l'application, et la valeur du composant contrôlé provient de celui-ci. État.

• Problèmes de performances

Dans les composants contrôlés, chaque fois que la valeur du formulaire change, Appeler le Le processeur de temps onChange entraînera une certaine consommation de performances. Cependant, il n'est pas recommandé d'utiliser des composants contrôlés dans React. Ce problème peut être résolu via l'architecture d'application redux pour réaliser l'unification de l'état.

Recommandations associées :

Exemple d'analyse du cycle de vie des composants React

Quelle est la fonction de cycle de vie du composant React

La manière la plus complète de créer des composants React

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!