Detaillierte Erläuterung der Verwendung von Requisiten und Zustandsattributen in React (Codebeispiel)

Dieser Artikel enthält eine detaillierte Erklärung der Verwendung von Requisiten und Zustandsattributen in React (Codebeispiele). Ich hoffe, dass er hilfreich ist Du hast geholfen.

In diesem Artikel wird hauptsächlich die spezifische Verwendung von React-Requisiten und Statusattributen vorgestellt, auf die sich Freunde in Not beziehen können. Bei Mängeln sind Kritik und Korrekturen willkommen.

props

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

<class>
 <student>John Kindem</student>
 <student>Alick Ice</student>
</class>

Eine solche XML-Datei drückt aus, dass es in Klasse 1 zwei Schüler gibt. Der Name des Schülers mit der Schülernummer 1 ist John Kindem und der Name des Schülers mit der Schülernummer 2 ist Alick Ice. Die ID lautet Das Attribut kann man sich als schreibgeschützte Konstante vorstellen.
HTML erbt von XML, und JSX ist in gewisser Weise eine Erweiterung von HTML und JS. Das Konzept der Attribute wurde natürlich geerbt.
In React verwenden wir das Konzept von Requisiten, um schreibgeschützte Werte an React-Komponenten zu übergeben, wie folgt:

// 假设我们已经自定义了一个叫Hello的组件
ReactDom.render(
  <hello></hello>,
  document.getElementById('root')
);

Beim Aufrufen einer React-Komponente können wir wie oben einige Konstanten an die Komponente übergeben , damit die Komponente intern aufgerufen werden kann. Die aufrufende Methode lautet wie folgt:

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
 
  render() {
    return (
      <p>
        </p><h1 id="Hello-this-props-firstName-this-props-lastName">Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      
    );//欢迎加入前端全栈开发交流圈一起学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
ReactDom.render(
  <hello></hello>,
  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 (
      <div>
        <h1 id="Hello-this-props-firstName-this-props-lastName">Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
ReactDom.render(
  <hello></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? Dieses Problem muss mithilfe des Status der React-Komponente gelöst werden. In React sollten alle sich ändernden Steuervariablen in den Status versetzt werden, und die entsprechende Komponente der Seite wird neu gerendert 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.
Lassen Sie uns zunächst ein Beispiel geben:

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 (
      <div>
        <h1 id="current-time-this-state-hour-this-state-minute-this-state-second">current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </div>
    );
  }
}
ReactDom.render(
  <time></time>,
  document.getElementById('root')
);

Auf diese Weise wird ein Zähler einmal pro Sekunde erstellt. Lassen Sie uns den Code erklären: Zuerst wird der Status im Konstruktor initialisiert:

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

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

this.setState({
  ...
});

Achten Sie unbedingt auf den Umfang dieser Funktion, bevor Sie diese Funktion verwenden Die Pfeilfunktion zeigt auf das Äußere Dies zeigt in einer normalen Funktion auf die Funktion selbst.
Außerdem werden hier die Lebenszyklusrückrufe von zwei React-Komponenten verwendet: „

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}
componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}

Der obige Timer-Code sollte also nicht schwierig sein, wenn die React-Komponente in den Dom geladen wird. Stellen Sie einen Timer zum Aktualisieren ein Der Status wird jede Sekunde aktualisiert, wenn die Komponente entladen wird. So einfach ist das.
React hat jedoch eine maximale Grenze für die Statusaktualisierungshäufigkeit. 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.

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