Heim > Artikel > Web-Frontend > Was sind die Reaktionsstatus? Detaillierte Einführung in den Reaktionsstatus (mit vollständigen Beispielen)

Was sind die Reaktionsstatus? Detaillierte Einführung in den Reaktionsstatus (mit vollständigen Beispielen)

寻∝梦Original: 2018-09-11 14:13:071460Durchsuche

In diesem Artikel wird hauptsächlich der Status der Reaktionskomponente ausführlich erläutert. Wenn Sie interessiert sind, können Sie hier klicken, um die Details des Artikels zum Reaktionsstatus anzuzeigen

Reaktionskomponenten müssen zwangsläufig ständig mit dem Benutzer interagieren. Am Anfang gibt es einen Anfangszustand, und während der Interaktion mit dem Benutzer kann jede Aktion des Benutzers Änderungen in der Zustandsmaschine auslösen Der Status wird durch die verschiedenen angezeigten React-Elemente bestimmt. Eine wesentliche Neuerung von React besteht darin, Komponenten als Zustandsmaschinen zu behandeln. Wenn sich der Zustand ändert, aktualisiert React das DOM und rendert die Seite auf die effektivste Weise neu, um die Benutzeroberfläche und die Daten konsistent zu halten.
1. Funktionsprinzip des Zustands
1. 1 Speicherzustand
React speichert den Zustand der Komponente in this.state.
1, 2 Legen Sie den Anfangswert des Status fest
Es gibt zwei Möglichkeiten, den Anfangswert von this.state festzulegen:
Wenn Sie eine Komponente mit der React.createClass-Methode erstellen, verwenden Sie die getInitialState-Methode, um Initialisieren Sie den Status, z. B.

　　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 Methoden zum Ändern des Komponentenstatus
Verwenden Sie this.setState(data, callback), um den Wert des Status zu ändern. Diese Methode kann Daten darin zusammenführen. Geben Sie den Zustand an und rendern Sie die Komponente erneut. Der Datenparameter kann ein Objekt oder eine Funktion sein, die ein Objekt zurückgibt, das die zu aktualisierenden Felder enthält. Der optionale Rückruf wird aufgerufen, nachdem die Komponente erneut gerendert wurde. Die Methode this.setState ändert den Statuswert. Nach jeder Änderung wird die Methode this.render automatisch aufgerufen, um die Komponente erneut zu rendern. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der PHP-Website)

1.4 Welche Art von Daten sollte der Status enthalten?
UI-Interaktion führt dazu geänderte Daten.
1.5 Welche Art von Daten sollte der Staat nicht enthalten? Dabei sollte die Formatierung der Präsentationsebene überlassen werden.
Komponenten sollten in der Render-Methode gesteuert werden.
2. Beispiel für die Zustandsentwicklung
Berechnen Sie die Anzahl der Klicks

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

Im obigen Beispiel wurde die Methode „getInitialState“ verwendet. Das ist ein Objekt This Das Objekt kann über die Eigenschaft this.state gelesen werden. Wenn der Benutzer auf die Komponente klickt, wodurch sich der Status ändert, ändert die Methode this.setState den Statuswert. Nach jeder Änderung wird die Methode this.render automatisch aufgerufen, um die Komponente erneut zu rendern.
Dieser Artikel endet hier (wenn Sie mehr lesen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).

Das obige ist der detaillierte Inhalt vonWas sind die Reaktionsstatus? Detaillierte Einführung in den Reaktionsstatus (mit vollständigen Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist reagieren? Was macht React hauptsächlich? (Fragen und Antworten)Nächster Artikel：Was ist reagieren? Was macht React hauptsächlich? (Fragen und Antworten)

In Verbindung stehende Artikel

Mehr sehen