▷ Componente Funcționale Față De Componente De Clasă în React

Există în principal două componente în React:

Componente funcționale
Componente ale clasei

Componente funcționale

Componentele funcționale sunt funcții de bază JavaScript. Acestea sunt de obicei funcții săgeată, dar pot fi create și cu regulat function cuvânt cheie.
Uneori denumite componente „stupide” sau „fără stat”, deoarece acceptă pur și simplu datele și le afișează într-o formă; adică sunt responsabili în principal pentru redarea interfeței de utilizare.
Reacționați metodele ciclului de viață (de exemplu, componentDidMount) nu poate fi utilizat în componente funcționale.
Nu există nicio metodă de redare utilizată în componentele funcționale.
Acestea sunt în principal responsabile pentru interfața de utilizare și sunt de obicei doar prezentative (de exemplu, o componentă Button).
Componentele funcționale pot accepta și utiliza accesorii.
Componentele funcționale ar trebui favorizate dacă nu este nevoie să utilizați starea React.

import React from "react";

const Person = props => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default Person;

Componente ale clasei

Componentele clasei utilizează clasa ES6 și extind Component clasa în React.
Uneori numite componente „inteligente” sau „de stare” deoarece tind să implementeze logică și stare.
Metodele ciclului de viață React pot fi utilizate în interiorul componentelor clasei (de exemplu, componentDidMount).
Treci recuzită la componentele clasei și le accesezi cu this.props

import React, { Component } from "react";

class Person extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  
  render() {
    return (
      <div>
        <h1>Hello Person</h1>
      </div>
    );
  }
}

export default Person;