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
function
nø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
Component
klassen 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