React Functional Components

React Functional Components

In diesem Blogpost berichte ich über Funktionale Components in React. Ich habe zwei Wochen lang mit React in ein Projekt gearbeitet, wo ich am Anfang direkt auf “Components” und ein bisschen später auch auf “Functional Components” gestossen bin. 

Was sind React Components?

React Components erlauben die Benutzeroberfläche in Code Komponente / Code Teile auf, die unabhängig und wiederverwendbar sind, aufzubrechen. React Components sind so wie JavaScript Funktionen. Man kann Parameter mitgeben (“props”) und man bekommt React Elemente zurück. 

Class Components

Man kann ES6-Klassen benutzen, um Components zu definieren. Class Components werden am häufigsten gebraucht, um Components zu definieren. Um so eine Klasse zu definieren, muss sie React.Component erben, die die render Funktion hat. 

class Welcome extends React.Component {
  render() {
    return <h1>Hallo {this.props.name}</h1>;
  }
}

Die render Funktion kommt von React.Component und muss definiert werden. Üblicherweise gibt die Funktion React Elemente zurück. Wenn man den Komponent aufruft, ruft es automatisch die render Funktion auf und rendert den Komponenten. 

Props und State

Props (Eigenschaften) sind argumente, die man als Objekt einem React Component mitgibt. Im vorherigen Beispiel konnte man gut sehen, wie die Props aufgerufen werden. In Class Components ruft man sie mit this.props.<props_name> auf. 

class Welcome extends React.Component {
  render() {
    return <h1>Hallo {this.props.name}</h1>;
  }
}
const element = <Welcome name="Sarah" />;

So wie man es bei DOM-Tags kennt, wenn man Attribute mitgibt (z.B. style, src oder id etc.). gibt man dem benutzerdefinierten Komponenten auch ein Attribut mit, mit einem beliebigen Namen (in diesem Fall name). In der Klasse muss man es nun mit this.props.name aufrufen. 

State ist eine Instanz eines React Class Component und kann als Objekt mit observable properties definiert werden, was das Verhalten (behaviour) des Komponenten kontrolliert. Anders gesagt ist der State eines Komponenten ein Objekt, dessen Informationen im Verlaufe (lifetime) ändern kann. State kann nur in Class Components benutzt werden. weil sie stateful sind. Functional Components sind dagegen stateless.

Functional Component

Sowie mit Klassen, kann man auch mit Funktionen Komponente definieren. Functional Components bezeichnet man als “Functional”, weil sie JavaScript Funktionen sind. Sie sind zusätzlich im Gegensatz zu Class Components auch stateless und haben kein lifetime cycle (Dies hat sich aber durch React 16.8 Hooks update geändert). Funktionale Komponente sind einfach zu schreiben und leicht zu verstehen und haben zusätzlich eine Leistungsverbesserung gegen Class Components. 

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}


const element = <Welcome name="Sara" />;

Es muss keine React.Component erben und hat somit auch keine render()-Funktion. Es ist stattdessen ganz klar und einfach zu verstehen. Props können ganz einfach mitgegeben werden, nur hat es aber keinen State, da die Functional Components stateless sind. Das hat sich aber geändert seit React 16.8 Hooks update, wo man nun den useState Hook benutzen kann um State in Functional Components zu haben. Lifecycle war auch nicht möglich für Functional Components, doch seit dem Hooks Update kann man hierfür auch den useEffect Hook benutzen.