Quels sont les statuts de réaction ? Introduction détaillée au statut de réaction (avec des exemples complets)-js tutoriel-php.cn

Quels sont les statuts de réaction ? Introduction détaillée au statut de réaction (avec des exemples complets)

寻∝梦

Libérer： 2018-09-11 14:13:07

original

1454 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de l'état du composant react Si vous êtes intéressé, vous pouvez cliquer pour voir les détails de l'article sur l'état de réaction

Les composants React doivent inévitablement interagir constamment avec l'utilisateur. Il y a un état initial au début, puis pendant l'interaction avec l'utilisateur, chaque action de l'utilisateur peut déclencher des changements dans la machine à états. l'état est déterminé par les différents éléments React affichés. Une innovation majeure de React consiste à traiter les composants comme des machines à états. Lorsque l'état change, React met à jour le DOM et restitue la page de la manière la plus efficace pour maintenir la cohérence de l'interface utilisateur et des données.
1. Principe de fonctionnement de l'état
1. 1 État de stockage
React stocke l'état du composant dans this.state.
1, 2 Définir la valeur initiale de l'état
Il existe deux façons de définir la valeur initiale de this.state :
Si vous créez un composant à l'aide de la méthode React.createClass, utilisez la méthode getInitialState pour initialiser l'état, tel que

　　var scoreComponent=React.createClass({
    getInitialState:function(){
    return{
    score:0
    };
    }
    ......
    });
　如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：
class scoreComponent extends React.Component{
    constructor(props){
    super(props);
    this.state ={score:60};
        }
    ...}

Copier après la connexion

1.3 Méthodes pour modifier l'état du composant
Utilisez this.setState(data, callback) pour modifier la valeur de l'état Cette méthode peut fusionner les données dans. this.state et restituez le composant. Le paramètre data peut être un objet ou une fonction qui renvoie un objet contenant les champs à mettre à jour. Le rappel facultatif sera appelé après le nouveau rendu du composant. La méthode this.setState modifie la valeur de l'état. Après chaque modification, la méthode this.render est automatiquement appelée pour restituer le composant. (Si vous souhaitez en savoir plus, accédez à la colonne React Reference Manual du site Web PHP chinois pour en savoir plus)

1.4 Quel type de données l'état doit-il contenir
L'interaction de l'interface utilisateur mènera à ? données modifiées.
1.5 Quel type de données l'état ne doit pas contenir ?
1. Données calculées
2. Les données copiées à partir des accessoires
l'état doit contenir les données les plus originales, telles que En parlant de. le temps, le formatage doit être laissé à la couche de présentation.
Les composants doivent être contrôlés dans la méthode de rendu.
2. Exemple de développement d'état
1. Calculer le nombre de clics

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React状态机</title>
 <script type="text/javascript" src="js/react.min.js" ></script>
 <script type="text/javascript" src="js/react-dom.min.js" ></script>
 <script type="text/javascript" src="js/browser.min.js" ></script>
  </head>
  <body>
    <p id="example"></p>
    <script type="text/babel">
      var BtnButton = React.createClass({
        getInitialState: function() {
          return {count: 0};
        },
        handleClick: function(event) {
          this.setState({count:this.state.count+1});
        },
        render: function() {
          var text =this.state.count ;
          return (
            <p onClick={this.handleClick}>
              获取点击的次数<br />
                 <span>{text}</span>
            </p> 
          );
        }
      });
      ReactDOM.render(
        <BtnButton />,
        document.getElementById(&#39;example&#39;)
      );
    </script>
  </body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, le composant BtnButton est créé. state, qui est un objet, cet objet peut être lu via la propriété this.state. Lorsque l'utilisateur clique sur le composant, provoquant un changement d'état, la méthode this.setState modifie la valeur de l'état. Après chaque modification, la méthode this.render est automatiquement appelée pour restituer le composant.

Cet article se termine ici (si vous souhaitez en savoir plus, rendez-vous sur la colonne
React User Manual du site Web PHP chinois pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Quels sont les statuts de réaction ? Introduction détaillée au statut de réaction (avec des exemples complets)