Making The Choice Between Class Components And Functional Components In React

Republicat de Platon

Urmaritori: 0

Making the Choice Between Class Components and Functional Components in React PlatoBlockchain Data Intelligence. Vertical Search. Ai.

Diferențele de bază

În React, o componentă este o bucată de cod care reprezintă o parte a unei interfețe cu utilizatorul. Există două tipuri principale de componente în React: componente de clasă și componente funcționale.

Componentele clasei sunt definite folosind o clasă care extinde clasa React.Component. Sunt mai bogate în funcții și au mai multe opțiuni pentru gestionarea evenimentelor de stare și de ciclu de viață. Iată cum arată o componentă de clasă:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

Componentele funcționale sunt doar funcții JavaScript care returnează un element React. Sunt mai simple decât componentele clasei și sunt mai ușor de citit și scris. Iată aceeași componentă ca mai sus, scrisă ca componentă funcțională:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Când să folosești ce

În general, ar trebui să utilizați componente funcționale, cu excepția cazului în care trebuie să utilizați o caracteristică care este disponibilă numai în componentele clasei, cum ar fi metodele de stare sau ciclul de viață.
Sunt cateva motive de ce ai putea prefera folosind componente de clasă peste componente funcționale:

Diviziune: Componentele de clasă pot facilita înțelegerea codului, mai ales dacă aveți o mulțime de metode de stare sau de ciclu de viață. Codul este organizat în metode clar definite și ușor de găsit.
Abilitatea de Reus: Componentele de clasă pot fi reutilizate mai ușor, deoarece pot fi extinse pentru a crea noi componente. Acest lucru poate fi util în special dacă aveți o mulțime de funcționalități partajate între componente.
Organizare: Componentele clasei pot facilita organizarea codului, deoarece puteți grupa metodele asociate împreună în aceeași componentă. Acest lucru poate facilita găsirea și întreținerea codului.

Există, de asemenea, câteva motive pentru care ați putea dori să alegeți să scrieți componente funcționale:

Când nu trebuie să utilizați metode de stare sau de ciclu de viață: Dacă nu aveți nevoie să utilizați metode de stare sau de ciclu de viață, atunci o componentă funcțională este o alegere bună, deoarece este mai simplă și mai ușor de citit și de scris decât o componentă de clasă.
Când aveți nevoie de o componentă pură: Componentele funcționale sunt componente „pure”, adică depind doar de recuzita și nu au propria lor stare. Acest lucru poate fi util dacă doriți să vă asigurați că o componentă este redată din nou numai atunci când elementele de recuzită se schimbă.
Când doriți să optimizați performanța: deoarece componentele funcționale sunt pure, acestea pot fi optimizate mai ușor de React, ceea ce poate duce la o performanță mai bună.
Când doriți să scrieți cod concis și ușor de citit: deoarece componentele funcționale sunt mai simple și au mai puține părți mobile, pot fi mai ușor de citit și de înțeles, mai ales dacă aveți o mulțime de componente în aplicația dvs.

în general, ar trebui să utilizați componente funcționale, cu excepția cazului în care aveți o nevoie specifică care poate fi satisfăcută doar cu o componentă de clasă.

useEffect și useState

Cu toate acestea, este important să rețineți că puteți utiliza metode de stare și ciclu de viață și în componentele funcționale, folosind useState și useEffect cârlige. În general, ar trebui să alegeți tipul de componentă care are cel mai mult sens pentru nevoile dvs. și care va face codul dvs. cel mai ușor de citit și de înțeles.

Dacă tot doriți să implementați evenimente de stare sau de ciclu de viață, veți avea posibilitatea de a utiliza cârlige pentru a vă activa componenta.

Acesta este modul în care ați implementa useEffect și useState în interiorul componentelor dumneavoastră funcționale

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Aici, avem o componentă care ține evidența unui numărător și afișează numărul curent pentru utilizator. Componenta folosește useState cârlig pentru a adăuga stare la componenta funcțională și useEffect cârlig pentru a efectua o acțiune (actualizarea titlului documentului) când se schimbă numărul.

Intrebari cu cheie

Acestea sunt principalele concluzii atunci când vine vorba de alegerea dintre componentele clasei și componentele funcționale în React:

Componentele clasei sunt definite folosind o clasă care extinde clasa React.Component și au mai multe opțiuni pentru gestionarea evenimentelor de stare și ciclu de viață.
Componentele funcționale sunt doar funcții JavaScript care returnează un element React și sunt mai simple și mai ușor de citit și scris.
Ar trebui să utilizați componente funcționale, cu excepția cazului în care trebuie să utilizați o caracteristică care este disponibilă numai în componentele clasei, cum ar fi metodele de stare sau de ciclu de viață.
Puteți utiliza cârligele useState și useEffect pentru a adăuga stare și pentru a efectua efecte secundare în componentele funcționale.
În general, alegerea dintre componentele clasei și componentele funcționale se reduce la ceea ce funcționează cel mai bine pentru nevoile dvs. și la ceea ce face codul dvs. cel mai ușor de citit și de înțeles.

Sper că această scurtă explicație vă va ajuta. Dacă doriți mentorat sau orice îndrumare în calea dvs. de a învăța javascript, react sau dezvoltare web în general, vă rugăm să nu ezitați să mă contactați pentru o sesiune 1:1.