Reaktionskomponenten (klassenbasiert vs. funktional)

React-Komponenten sind die Bausteine ​​jeder React-Anwendung. Sie ermöglichen Ihnen, die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufzuteilen, die separat verwaltet und gerendert werden können. Reaktionskomponenten gibt es in zwei Haupttypen: Funktionskomponenten und Klassenkomponenten.

Funktionskomponenten
Funktionskomponenten sind einfacher und werden als JavaScript-Funktionen geschrieben. Sie nehmen Requisiten (Eingabedaten) als Argument und geben JSX zurück, das beschreibt, wie die Benutzeroberfläche aussehen soll. Ab React 16.8 können Funktionskomponenten auch Status- und Nebeneffekte mithilfe von Hooks wie useState und useEffect verarbeiten.

import React, { useState } from 'react';

const Welcome = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1 id="Hello-props-name">Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

Klassenkomponenten
Klassenkomponenten waren die ursprüngliche Art, Komponenten in React zu schreiben. Sie erweitern die React.Component-Klasse und müssen eine render()-Methode enthalten, die JSX zurückgibt. Klassenkomponenten können über eigene Status- und Lebenszyklusmethoden wie „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ verfügen.

import React, { Component } from 'react';

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

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onclick="{this.handleClick}">Click me</button>
      </div>
    );
  }
}

export default Welcome;

Schlüsselkonzepte:

• JSX: Eine Syntaxerweiterung von JavaScript, die wie HTML aussieht. Reaktionskomponenten geben JSX zurück, um die Benutzeroberfläche zu beschreiben.
• Requisiten: Abkürzung für „Eigenschaften“. Props ermöglichen die Weitergabe von Daten von übergeordneten Komponenten an untergeordnete Komponenten.
• Status: Ein integriertes Objekt zum Speichern dynamischer Daten, die sich darauf auswirken, was in der Komponente gerendert wird. Nur Komponenten, die den Status verwenden (entweder Funktions- oder Klassenkomponenten), können basierend auf Änderungen an diesen Daten neu gerendert werden.

Haken (für Funktionskomponenten):

• useState: Ermöglicht die Verwaltung des Status in einer Funktionskomponente.
• useEffect: Ermöglicht das Ausführen von Nebeneffekten in einer Funktionskomponente (z. B. Abrufen von Daten, Aktualisieren des DOM).

React fördert die Erstellung kleiner, wiederverwendbarer Komponenten, die zu größeren Anwendungen kombiniert werden können, wodurch die Codebasis modular bleibt und einfacher zu warten ist.

Das obige ist der detaillierte Inhalt vonReaktionskomponenten (klassenbasiert vs. funktional). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!