Detaillierte Erläuterung der Verwendung von React-Requisiten und Statusattributen

Dieses Mal werde ich Ihnen die Verwendung von React-Requisiten und Statusattributen ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von React-Requisiten und Statusattributen?

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 akzeptiert den Wert von props, 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, Komponente Lebenszyklus

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. Wenn die Komponente deinstalliert wird, müssen Sie den Timer löschen. Das ist ganz einfach.

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:

Angular6.0 implementiert die Funktion zum verzögerten Laden von Komponenten (mit Code)

jQuery-Kodierungskonvertierung in Base64 AJAX-Upload bestanden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von React-Requisiten und Statusattributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!