Komponenten der Reaktionsklasse

❮ Vorherige Nächste ❯

Vor React 16.8 waren Klassenkomponenten die einzige Möglichkeit, Status und Lebenszyklus einer React-Komponente zu verfolgen. Funktionskomponenten wurden als "zustandslos" betrachtet.

Mit dem Hinzufügen von Hooks sind Funktionskomponenten jetzt fast äquivalent zu Klassenkomponenten. Die Unterschiede sind so gering, dass Sie wahrscheinlich nie eine Class-Komponente in React verwenden müssen.

Obwohl Funktionskomponenten bevorzugt werden, gibt es derzeit keine Pläne, Klassenkomponenten aus React zu entfernen.

Dieser Abschnitt gibt Ihnen einen Überblick über die Verwendung von Klassenkomponenten in React.

Sie können diesen Abschnitt gerne überspringen und stattdessen Funktionskomponenten verwenden.

Reaktionskomponenten

Komponenten sind unabhängige und wiederverwendbare Codebits. Sie dienen demselben Zweck wie JavaScript-Funktionen, arbeiten jedoch isoliert und geben HTML über eine render()-Funktion zurück.

Es gibt zwei Arten von Komponenten, Klassenkomponenten und Funktionskomponenten. In diesem Kapitel lernen Sie Klassenkomponenten kennen.

Erstellen Sie eine Klassenkomponente

Beim Erstellen einer React-Komponente muss der Name der Komponente mit einem Großbuchstaben beginnen.

Die Komponente muss die extends React.ComponentAnweisung enthalten, diese Anweisung erstellt eine Vererbung an React.Component und gibt Ihrer Komponente Zugriff auf die Funktionen von React.Component.

Die Komponente benötigt auch eine render()Methode, diese Methode gibt HTML zurück.

Beispiel

Erstellen Sie eine Klassenkomponente namens Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Jetzt hat Ihre React-Anwendung eine Komponente namens Car, die ein <h2>Element zurückgibt.

Um diese Komponente in Ihrer Anwendung zu verwenden, verwenden Sie eine ähnliche Syntax wie normales HTML: <Car />

Beispiel

Zeigen Sie die CarKomponente im "root"-Element an:

ReactDOM.render(<Car />, document.getElementById('root'));

Zertifiziert werden!

Absolvieren Sie die React-Module, machen Sie die Übungen, machen Sie die Prüfung und werden Sie w3schools-zertifiziert!!

$ 95 REGISTRIEREN

Komponentenkonstrukteur

Wenn constructor()Ihre Komponente eine Funktion enthält, wird diese Funktion aufgerufen, wenn die Komponente initiiert wird.

In der Konstruktorfunktion initiieren Sie die Eigenschaften der Komponente.

In React sollten Komponenteneigenschaften in einem Objekt namens gespeichert werden state.

stateSie werden später in diesem Tutorial mehr darüber erfahren .

Die Konstruktorfunktion ist auch der Ort, an dem Sie die Vererbung der übergeordneten Komponente berücksichtigen, indem Sie die super() Anweisung einschließen, die die Konstruktorfunktion der übergeordneten Komponente ausführt, und Ihre Komponente hat Zugriff auf alle Funktionen der übergeordneten Komponente ( React.Component).

Beispiel

Erstellen Sie eine Konstruktorfunktion in der Autokomponente und fügen Sie eine Farbeigenschaft hinzu:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

Verwenden Sie die Eigenschaft color in der Funktion render():

Beispiel

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Requisiten

Eine andere Möglichkeit, Komponenteneigenschaften zu handhaben, ist die Verwendung von props.

Props sind wie Funktionsargumente, und Sie senden sie als Attribute an die Komponente.

propsIm nächsten Kapitel erfahren Sie mehr darüber .

Beispiel

Verwenden Sie ein Attribut, um eine Farbe an die Car-Komponente zu übergeben, und verwenden Sie sie in der Funktion render():

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Requisiten im Konstruktor

Wenn Ihre Komponente über eine Konstruktorfunktion verfügt, sollten die Props immer an den Konstruktor und über die super()Methode auch an die React.Component übergeben werden.

Beispiel

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

Komponenten in Komponenten

Wir können auf Komponenten innerhalb anderer Komponenten verweisen:

Beispiel

Verwenden Sie die Car-Komponente innerhalb der Garage-Komponente:

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Komponenten in Dateien

Bei React dreht sich alles um die Wiederverwendung von Code, und es kann klug sein, einige Ihrer Komponenten in separate Dateien einzufügen.

Erstellen Sie dazu eine neue Datei mit einer .js Dateierweiterung und fügen Sie den Code darin ein:

Beachten Sie, dass die Datei mit dem Importieren von React beginnen muss (wie zuvor) und mit der Anweisung enden muss export default Car;.

Beispiel

Dies ist die neue Datei, wir haben sie benannt Car.js:

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

Um die CarKomponente nutzen zu können, müssen Sie die Datei in Ihre Anwendung importieren.

Beispiel

Jetzt importieren wir die Car.jsDatei in die Anwendung und können die Car Komponente so verwenden, als wäre sie hier erstellt worden.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

Komponentenzustand der Reaktionsklasse

Komponenten der Reaktionsklasse haben ein eingebautes stateObjekt.

Sie haben vielleicht bemerkt, dass wir statefrüher im Abschnitt zum Komponentenkonstruktor verwendet haben.

Das stateObjekt ist der Ort, an dem Sie Eigenschaftswerte speichern, die zur Komponente gehören.

Wenn sich das stateObjekt ändert, wird die Komponente neu gerendert.

Zustandsobjekt erstellen

Das Zustandsobjekt wird im Konstruktor initialisiert:

Beispiel

Geben Sie das stateObjekt in der Konstruktormethode an:

class Car extends React.Component {
  constructor(props) {
    super(props);
  this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Das Zustandsobjekt kann beliebig viele Eigenschaften enthalten:

Beispiel

Geben Sie alle Eigenschaften an, die Ihre Komponente benötigt:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Verwenden des `state`Objekts

Verweisen Sie auf das stateObjekt an einer beliebigen Stelle in der Komponente, indem Sie die folgende Syntax verwenden:this.state.propertyname

Beispiel:

Verweisen Sie auf das stateObjekt in der render()Methode:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Ändern des `state`Objekts

Um einen Wert im Zustandsobjekt zu ändern, verwenden Sie die this.setState()Methode.

Wenn sich ein Wert im stateObjekt ändert, wird die Komponente neu gerendert, was bedeutet, dass sich die Ausgabe entsprechend den neuen Werten ändert.

Beispiel:

Fügen Sie eine Schaltfläche mit einem onClickEreignis hinzu, das die Farbeigenschaft ändert:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Verwenden Sie immer die setState()Methode, um das Zustandsobjekt zu ändern. Dadurch wird sichergestellt, dass die Komponente weiß, dass sie aktualisiert wurde, und die Methode render() (und alle anderen Lebenszyklusmethoden) aufruft.

Lebenszyklus von Komponenten

Jede Komponente in React hat einen Lebenszyklus, den Sie während seiner drei Hauptphasen überwachen und manipulieren können.

Die drei Phasen sind: Mounten , Aktualisieren und Unmounten .

Montage

Mounten bedeutet, Elemente in das DOM einzufügen.

React hat vier eingebaute Methoden, die beim Mounten einer Komponente in dieser Reihenfolge aufgerufen werden:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

Die render()Methode ist erforderlich und wird immer aufgerufen, die anderen sind optional und werden aufgerufen, wenn Sie sie definieren.

constructor

Die Methode wird vor allem anderen aufgerufen, wenn die Komponente initiiert wird, und es ist der natürliche Ort, um den Anfangswert und andere Anfangswerte constructor()einzurichten .state

Die constructor()Methode wird mit props, als Argumenten aufgerufen, und Sie sollten immer damit beginnen, super(props)vor allem anderen aufzurufen, dies initiiert die Konstruktormethode des Elternteils und ermöglicht es der Komponente, Methoden von ihrem Elternteil ( React.Component) zu erben.

Beispiel:

Die constructorMethode wird von React jedes Mal aufgerufen, wenn Sie eine Komponente erstellen:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

getDerivedStateFromProps

Die getDerivedStateFromProps()Methode wird direkt vor dem Rendern der Elemente im DOM aufgerufen.

Dies ist der natürliche Ort, um das stateObjekt basierend auf dem Anfangsbuchstaben zu setzen props.

It takes state as an argument, and returns an object with changes to the state.

The example below starts with the favorite color being "red", but the getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:

Example:

The getDerivedStateFromProps method is called right before the render method:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

render

The render() method is required, and is the method that actually outputs the HTML to the DOM.

Example:

A simple component with a simple render() method:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidMount

The componentDidMount() method is called after the component is rendered.

This is where you run statements that requires that the component is already placed in the DOM.

Example:

At first my favorite color is red, but give me a second, and it is yellow instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Updating

The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

The render() method is required and will always be called, the others are optional and will be called if you define them.

getDerivedStateFromProps

Also at updates the getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated.

This is still the natural place to set the state object based on the initial props.

The example below has a button that changes the favorite color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the favcol attribute, the favorite color is still rendered as yellow:

Example:

If the component gets updated, the getDerivedStateFromProps() method is called:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

shouldComponentUpdate

In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.

The default value is true.

The example below shows what happens when the shouldComponentUpdate() method returns false:

Example:

Stop the component from rendering at any update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Example:

Same example as above, but this time the shouldComponentUpdate() method returns true instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

render

The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

The example below has a button that changes the favorite color to blue:

Example:

Click the button to make a change in the component's state:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

getSnapshotBeforeUpdate

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.

If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".

This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty DIV1 element.

Then the componentDidUpdate() method is executed and writes a message in the empty DIV2 element:

Example:

Use the getSnapshotBeforeUpdate() method to find out what the state object looked like before the update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidUpdate

The componentDidUpdate method is called after the component is updated in the DOM.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and the color becomes "yellow".

This action triggers the update phase, and since this component has a componentDidUpdate method, this method is executed and writes a message in the empty DIV element:

Example:

The componentDidUpdate method is called after the update has been rendered in the DOM:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Unmounting

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()

componentWillUnmount

The componentWillUnmount method is called when the component is about to be removed from the DOM.

Example:

Click the button to delete the header:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));

❮ Previous Next ❯

Reaktions- Tutorial

Haken reagieren

Reaktionsübungen

Komponenten der Reaktionsklasse

Reaktionskomponenten

Erstellen Sie eine Klassenkomponente

Beispiel

Beispiel

Zertifiziert werden!

Komponentenkonstrukteur

Beispiel

Beispiel

Requisiten

Beispiel

Requisiten im Konstruktor

Beispiel

Komponenten in Komponenten

Beispiel

Komponenten in Dateien

Beispiel

Beispiel

Komponentenzustand der Reaktionsklasse

Zustandsobjekt erstellen

Beispiel

Beispiel

Verwenden des stateObjekts

Beispiel:

Ändern des stateObjekts

Beispiel:

Lebenszyklus von Komponenten

Montage

constructor

Beispiel:

getDerivedStateFromProps

Example:

render

Example:

componentDidMount

Example:

Updating

getDerivedStateFromProps

Example:

shouldComponentUpdate

Example:

Example:

render

Example:

getSnapshotBeforeUpdate

Example:

componentDidUpdate

Example:

Unmounting

componentWillUnmount

Example:

Verwenden des `state`Objekts

Ändern des `state`Objekts