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;

Mai multe informatii