Funktionskomponenten vs Klassenkomponenten in Reaktion

Es gibt hauptsächlich zwei Komponenten in React:

  • Funktionskomponenten
  • Klassenkomponenten

Funktionskomponenten

  • Funktionskomponenten sind grundlegende JavaScript-Funktionen. Dies sind normalerweise Pfeilfunktionen, können aber auch mit dem regulären functionSchlüsselwort erstellt werden.
  • Manchmal als "dumme" oder "zustandslose" Komponenten bezeichnet, da sie einfach Daten akzeptieren und in irgendeiner Form anzeigen. Das heißt, sie sind hauptsächlich für das Rendern der Benutzeroberfläche verantwortlich.
  • React Lifecycle-Methoden (zum Beispiel componentDidMount) können nicht in Funktionskomponenten verwendet werden.
  • In Funktionskomponenten wird keine Rendermethode verwendet.
  • Diese sind hauptsächlich für die Benutzeroberfläche verantwortlich und dienen normalerweise nur der Präsentation (z. B. eine Button-Komponente).
  • Funktionskomponenten können Requisiten annehmen und verwenden.
  • Funktionskomponenten sollten bevorzugt werden, wenn Sie den Reaktionsstatus nicht verwenden müssen.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Klassenkomponenten

  • Klassenkomponenten verwenden die ES6-Klasse und erweitern die ComponentKlasse in React.
  • Manchmal als "intelligente" oder "zustandsbehaftete" Komponenten bezeichnet, da sie dazu neigen, Logik und Zustand zu implementieren.
  • React Lifecycle-Methoden können beispielsweise in Klassenkomponenten verwendet werden componentDidMount.
  • Sie geben Requisiten an Klassenkomponenten weiter und greifen mit auf diese zu this.props
import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 

Hello Person

); } } export default Person;

Mehr Informationen

  • Komponenten reagieren
  • Funktionale vs Klassenkomponenten
  • Stateful vs Stateless Funktionskomponenten in Reaktion
  • Zustand und Lebenszyklus