Quels sont les composants de l’état de réaction ?

Il existe deux types de composants d'état de réaction : 1. Les composants avec état, qui peuvent définir l'état, sont utilisés lorsque les données doivent être modifiées. 2. Les composants sans état, qui ne peuvent pas définir l'état, sont généralement utilisés dans ; applications où il n’y a pas de données. Où changer.

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

Composants React : composants avec état et composants sans état

1. Qu'est-ce que l'état du composant

Définition : Ce sont des données utilisées pour décrire la forme d'une transaction à un moment donné. Généralement écrit comme état.

Caractéristiques : L'état peut être modifié et la vue changera en conséquence

Fonction : (1) Enregistrer les données (2) Poser les bases d'une mise à jour ultérieure de la vue

Par exemple, concevez un compteur et le compteur le fera changer après avoir cliqué sur le bouton +1 Le numéro deviendra le numéro d'origine + 1

2 Deux états

2.1 Composant sans état : un composant qui ne peut pas définir d'état, Le composant fonctionnel est également appelé un. Composant sans état

Composant sans état Il est généralement utilisé dans des endroits où il n'y a pas de changement de données, comme le rendu d'un texte d'introduction de produit. Il n'a pas besoin d'être mis à jour en temps réel. réutilisés à tout moment

2.2 Composants avec état : composants qui peuvent définir l'état, Les composants de catégorie sont également appelés composants avec état

Les scénarios d'application des composants avec état sont beaucoup plus larges. Ils peuvent être trouvés dans pratiquement tous les endroits où. les données doivent être modifiées

3. Instance d'état du composant de classe

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}
 
  render() {
//如果当state里的数据种类较多时可以使用解构赋值
// 例如：const { tabs, active, list, content } = this.state
    return (
      <>
        <h1>歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

【Recommandations associées : Tutoriel vidéo Redis】

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!