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
#Componente #funcționale #față #componente #clasă #în #React
Componente funcționale față de componente de clasă în React