Ausführliche Erläuterung praktischer Fälle von Reaktions-Requisiten und Zustandsattributen

Dieses Mal werde ich Ihnen den tatsächlichen Kampffall von Reaktions-Requisiten und Zustandsattributen ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für den tatsächlichen Kampf von Reaktions-Requisiten und Zustandsattributen? .

Im vorherigen Abschnitt haben wir über React-Komponenten und die Verwendung von ES6-Klassen gesprochen, um eine React-Komponente zu erstellen und an anderen Stellen zu verwenden. In diesem Abschnitt werden wir über die beiden Seelen der React-Komponenten sprechen – Requisiten und Zustand.

props

Ich weiß nicht, ob Sie sich noch an die Attribute im XML-Tag erinnern, etwa so:

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>

Die durch solche ausgedrückte Bedeutung Eine XML-Datei Es gibt zwei Schüler in Klasse 1. Der Schüler mit der Schülernummer 1 heißt John Kindem und der Schüler mit der Schülernummer 2 heißt Alick Ice. Sie können sich das als Konstante vorstellen ist schreibgeschützt.

HTML erbt von XML, und JSX ist in gewissem Sinne eine Erweiterung von HTML und JS, sodass das Konzept der Attribute natürlich geerbt wurde.

In React verwenden wir das Konzept von Requisiten, um schreibgeschützte Werte an React-Komponenten zu übergeben, wie folgt:

// 假设我们已经自定义了一个叫Hello的组件
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

Wenn wir eine React-Komponente aufrufen, können wir sie an die Komponente übergeben wie oben Übergeben Sie einige Konstanten, die die Komponente intern aufrufen soll. Die aufrufende Methode lautet wie folgt:

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

Um die übergebenen Requisiten innerhalb der Komponente abzurufen, müssen Sie nur das Objekt this.props verwenden. Denken Sie jedoch vor der Verwendung daran, den Konstruktor der Komponente zu überschreiben und zu akzeptieren Der Wert von props wird verwendet, um den Konstruktor der übergeordneten Klasse aufzurufen.

Natürlich können Requisiten auch Standardwerte festlegen, wie unten gezeigt:

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);

Deklarieren Sie einfach einen statischen Standardwert für Requisiten in der ES6-Klasse, und der laufende Effekt ist der gleiche wie oben.

Requisiten sind nicht kompliziert und können mit ein wenig Übung erlernt werden.

Zustand, Komponentenlebenszyklus

Sie erinnern sich vielleicht: Was ist, wenn ich einer React-Komponente dynamische Effekte hinzufügen möchte? Es scheint, dass das bisher erworbene Wissen dieses Problem nicht lösen kann.

Dieses Problem muss mithilfe des Status der React-Komponente gelöst werden. In React sollten alle sich ändernden Steuervariablen in den Status versetzt werden Darüber hinaus ist der Zustand vollständig intern. Der Zustand kann nicht von außen nach innen übertragen werden, und der Wert des Zustands kann nicht direkt geändert werden.

Lass uns zuerst ein Beispiel geben:

rrree

Auf diese Weise wird ein Zähler einmal pro Sekunde erklärt. Erklären wir den Code: Zuerst wird der Status im Konstruktor initialisiert. so:

import React from 'react';
import ReactDom from 'react-dom';
class Time extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      hour: 0,
      minute: 0,
      second: 0
    }
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  tick() {
    // 计算新时间
    let newSecond, newMinute, newHour;
    let carryMinute = 0, carryHour = 0;
    newSecond = this.state.second + 1;
    if (newSecond > 59) {
      carryMinute = 1;
      newSecond -= 60;
    }
    newMinute = this.state.minute + carryMinute;
    if (newMinute > 59) {
      carryHour = 1;
      newMinute -= 60;
    }
    newHour = this.state.hour + carryHour;
    if (newHour > 59) newHour -= 60;
    // 设置新状态
    this.setState({
      hour: newHour,
      minute: newMinute,
      second: newSecond
    });
  }
  render() {
    return (
      <p>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

Um den Status zu ändern, verwenden Sie eine integrierte Funktion in der Basisklasse der React-Komponente:

constructor(props) {
  super(props);
  // 在这初始化state
  this.state = {
    ...
  }
}

Achten Sie unbedingt auf den Umfang, bevor Sie diese Funktion verwenden Dies zeigt in der Pfeilfunktion auf External this, während this in einer normalen Funktion auf die Funktion selbst zeigt.

Außerdem werden hier die Lebenszyklusrückrufe von zwei React-Komponenten verwendet:

this.setState({
  ...
});

Der obige Timer-Code sollte also nicht schwierig sein, nachdem die React-Komponente in den Dom geladen wurde Um den Status jede Sekunde zu aktualisieren, werden die Komponenten auf der Seite neu gerendert. Beim Entladen der Komponente muss der Timer gelöscht werden.

React hat jedoch eine maximale Grenze für die Häufigkeit der Statusaktualisierung. Das Überschreiten dieser Grenze führt dazu, dass die Leistung beim Rendern der Seite abnimmt. Sie müssen darauf achten, setState nicht in Hochfrequenzfunktionen zu verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Betrieb der domänenübergreifenden Whitelist-Einstellung von Angularjs

So verwenden Sie Webpack zur Bearbeitung domänenübergreifender Anfragen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung praktischer Fälle von Reaktions-Requisiten und Zustandsattributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!