Funktionelle komponenter vs klasse komponenter i React

Der er hovedsageligt to komponenter i React:

  • Funktionelle komponenter
  • Klassekomponenter

Funktionelle komponenter

  • Funktionelle komponenter er grundlæggende JavaScript-funktioner. Disse er typisk pilfunktioner, men kan også oprettes med det almindelige functionnøgleord.
  • Nogle gange kaldet "dumme" eller "statsløse" komponenter, da de simpelthen accepterer data og viser dem i en eller anden form; det er de er hovedsagelig ansvarlige for gengivelse af brugergrænsefladen.
  • React-livscyklusmetoder (for eksempel componentDidMount) kan ikke bruges i funktionelle komponenter.
  • Der anvendes ingen gengivelsesmetode i funktionelle komponenter.
  • Disse er primært ansvarlige for brugergrænsefladen og er typisk kun præsentationsmæssige (for eksempel en knapkomponent).
  • Funktionelle komponenter kan acceptere og bruge rekvisitter.
  • Funktionelle komponenter bør foretrækkes, hvis du ikke har brug for at bruge React-tilstanden.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Klassekomponenter

  • Klassekomponenter gør brug af ES6-klassen og udvider Componentklassen i React.
  • Nogle gange kaldet "smarte" eller "stateful" komponenter, da de har tendens til at implementere logik og tilstand.
  • React-livscyklusmetoder kan bruges i klassekomponenter (for eksempel componentDidMount).
  • Du sender rekvisitter ned til klassekomponenter og får adgang til dem med 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;

Mere information

  • Reager komponenter
  • Funktionelle vs klassekomponenter
  • Stateful vs Stateless Functional Components in React
  • Tilstand og livscyklus