Maison >interface Web >js tutoriel >Quels sont les statuts de réaction ? Introduction détaillée au statut de réaction (avec des exemples complets)

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

寻∝梦original: 2018-09-11 14:13:071496parcourir

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};
        }
    ...}

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu'est-ce que réagir ? Que fait principalement React ? (Questions et réponses)Article suivant：Qu'est-ce que réagir ? Que fait principalement React ? (Questions et réponses)

Articles Liés

Voir plus