Funkcionalne komponente u odnosu na komponente klase u Reactu

U Reactu postoje uglavnom dvije komponente:

  • Funkcionalne komponente
  • Komponente razreda

Funkcionalne komponente

  • Funkcionalne komponente su osnovne JavaScript funkcije. To su obično funkcije strelica, ali ih je moguće stvoriti i pomoću functionključne riječi regular .
  • Ponekad se nazivaju "glupim" ili "apatridnim" komponentama jer jednostavno prihvaćaju podatke i prikazuju ih u nekom obliku; to jest oni su uglavnom odgovorni za generiranje korisničkog sučelja.
  • Metode životnog ciklusa reagiranja (na primjer, componentDidMount) ne mogu se koristiti u funkcionalnim komponentama.
  • U funkcionalnim komponentama ne koristi se metoda prikaza.
  • Oni su uglavnom odgovorni za korisničko sučelje i obično su samo prezentacijski (na primjer, komponenta gumba).
  • Funkcionalne komponente mogu prihvatiti i koristiti rekvizite.
  • Funkcionalnim komponentama treba dati prednost ako ne trebate koristiti stanje reakcije.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Komponente razreda

  • Komponente klase koriste klasu ES6 i proširuju Componentklasu u Reactu.
  • Ponekad se nazivaju "pametnim" ili "državnim" komponentama jer imaju tendenciju implementirati logiku i stanje.
  • Metode životnog ciklusa React mogu se koristiti unutar komponenata klase (na primjer, componentDidMount).
  • Rekvizite prosljeđujete komponentama klase i pristupate im s 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;

Više informacija

  • Komponente za reakciju
  • Funkcionalne komponente u odnosu na klasu
  • Funkcionalne komponente u stanju reagiranja protiv stanja bez državljanstva
  • Država i životni ciklus