React-Komponenten-API

Die React-Komponenten-API deckt mehrere wichtige Aspekte ab, darunter Lebenszyklusmethoden, State-Management, Props-Übergabe und Event-Handling.

Im Folgenden finden Sie eine detaillierte Beschreibung der React-Komponenten-API:

Lebenszyklusmethoden

Die Lebenszyklusmethoden von React-Komponenten sind in drei Hauptphasen unterteilt: Mounting, Updating und Unmounting. Eine detaillierte Beschreibung finden Sie unter:React-Komponenten-Lebenszyklus 。

Mounting-Phase

  • constructor(props): Der Konstruktor, der zum Initialisieren von State oder zum Binden von Methoden verwendet wird.
  • static getDerivedStateFromProps(props, state): Wird jedes Mal aufgerufen, bevor die render-Methode aufgerufen wird, und dient zum Aktualisieren des States.
  • componentDidMount(): Wird aufgerufen, nachdem die Komponente gemountet wurde; an diesem Punkt können DOM-Operationen oder Datenanfragen ausgeführt werden.

Beispiel

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.reset) {
      return { count: 0 };
    }
    return null;
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Aktualisierungsphase

  • static getDerivedStateFromProps(props, state): Wie in der Mounting-Phase, wird verwendet, um den State zu aktualisieren.
  • shouldComponentUpdate(nextProps, nextState): Gibt einen booleschen Wert zurück, der bestimmt, ob die Komponente erneut gerendert werden soll.
  • render(): Rendert die UI der Komponente.
  • getSnapshotBeforeUpdate(prevProps, prevState): Wird aufgerufen, bevor das DOM aktualisiert wird, um einige Informationen zu erfassen (z. B. die Scroll-Position).
  • componentDidUpdate(prevProps, prevState, snapshot): Wird aufgerufen, nachdem die Komponente aktualisiert wurde.

Beispiel

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return { scrollPosition: window.scrollY };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      window.scrollTo(0, snapshot.scrollPosition);
    }
    console.log('Komponente aktualisiert');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Unmounting-Phase

  • componentWillUnmount(): Wird aufgerufen, wenn die Komponente kurz davor ist, ausgehängt zu werden; dient zum Aufräumen von Ressourcen (wie Timer, Event-Listener usw.).

Beispiel

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log('Komponente wird ausgehängt');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Zustandsverwaltung

State ist der Zustand innerhalb einer Komponente; verwenden Siethis.stateum ihn zu definieren und zu verwalten. Verwenden Sie diesetStateMethode, um den State zu aktualisieren.

Beispiel

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Zähler: {this.state.count}</p>
        <button onClick={this.increment}>Erhöhen</button>
      </div>
    );
  }
}

Props-Weitergabe

Greifen Sie über this.props auf die an die Komponente übergebenen Props zu; PropTypes kann zur Typüberprüfung verwendet werden.

Beispiel

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
};

// Komponente verwenden und Props übergeben
<MyComponent title="Hello, World!" />

Ereignisbehandlung

Behandeln Sie Benutzerinteraktionen über Event-Handler-Funktionen. Sie müssen .bind(this) oder Arrow-Funktionen verwenden, um sicherzustellen, dass this auf den richtigen Kontext verweist.

Beispiel

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Klick mich</button>;
  }
}

Bedingtes Rendern

Steuern Sie das Rendering von Komponenten durch bedingte Anweisungen.

Beispiel

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isVisible: true };
  }

  toggleVisibility = () => {
    this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
  };

  render() {
    return (
      <div>
        {this.state.isVisible && <p>Dies ist sichtbar</p>}
        <button onClick={this.toggleVisibility}>Umschalten</button>
      </div>
    );
  }
}

Listen-Rendering

Rendern Sie Listen mit der map-Methode des Arrays.

Beispiel

class MyComponent extends React.Component {
  render() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

Kontrollierte Komponenten

Steuern Sie die Werte von Formularelementen über den State.

Beispiel

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Übermittelter Wert:', this.state.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="submit">Absenden</button>
      </Form>
    );
  }
}

State setzen: setState

setState ist die Methode in React, die verwendet wird, um den State einer Komponente zu aktualisieren.

Die Syntax lautet wie folgt:

setState(object nextState[, function callback])

Parameterbeschreibung

  • object nextState: Ein Objekt, das die Schlüssel-Wert-Paare des zu aktualisierenden States enthält. React führt dieses Objekt mit dem aktuellen State zusammen.
  • function callback: Eine optionale Callback-Funktion, die ausgeführt wird, nachdem der State aktualisiert und das erneute Rendern abgeschlossen ist.

nextState mit dem aktuellen State zusammenführen und die Komponente neu rendern.

setState ist die primäre Methode, um UI-Aktualisierungen in React-Event-Handlern und Request-Callback-Funktionen auszulösen.

Über setState

Du kannst den State innerhalb einer Komponente nicht über this.state ändern, da dieser State ersetzt wird, nachdem setState() aufgerufen wurde.

setState() ändert this.state nicht sofort; stattdessen wird ein State erzeugt, der gerade verarbeitet werden soll. setState() ist nicht unbedingt synchron; um die Leistung zu verbessern, führt React State-Änderungen und DOM-Rendering stapelweise aus.

setState() löst immer ein erneutes Rendern der Komponente aus, es sei denn, in shouldComponentUpdate() ist eine bedingte Rendering-Logik implementiert.

Durch die ordnungsgemäße Verwendung von setState kannst du den State einer Komponente effektiv verwalten und sicherstellen, dass notwendige Operationen nach State-Aktualisierungen ausgeführt werden, wodurch die Reaktionsfähigkeit und Zuverlässigkeit der Anwendung verbessert werden.

React-Beispiel

class Counter extends React.Component{ constructor(props) { super(props); this.state = {clickCount: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); } render () { return (<h2 onClick={this.handleClick}>Klick mich! Anzahl der Klicks:{this.state.clickCount}</h2>); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Counter /> );

Ausprobieren »

Im Beispiel erhöht ein Klick auf das h2-Tag den Klickzähler um 1.

Andere Erweiterungen