Making The Choice Between Class Components And Functional Components In React

Újra kiadta Platón

Követő: 0

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

Alapvető különbségek

A Reactban az összetevő egy kódrészlet, amely a felhasználói felület egy részét képviseli. A Reactben két fő összetevőtípus létezik: osztálykomponensek és funkcionális összetevők.

Az osztályösszetevők a React.Component osztályt kiterjesztő osztály segítségével határozhatók meg. Funkciókban gazdagabbak, és több lehetőségük van az állapot- és életciklus-események kezelésére. Így néz ki egy osztálykomponens:

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

A funkcionális összetevők csak JavaScript-függvények, amelyek egy React elemet adnak vissza. Egyszerűbbek, mint az osztályösszetevők, és könnyebben olvashatók és írhatók. Itt ugyanaz a komponens, mint fent, funkcionális komponensként írva:

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

Mikor mit kell használni

Általánosságban elmondható, hogy funkcionális összetevőket kell használni, kivéve, ha olyan szolgáltatást kell használnia, amely csak az osztályösszetevőkben érhető el, például állapot- vagy életciklus-módszereket.
Van néhány miatt miért részesítheti előnyben osztálykomponensek használata funkcionális komponensekkel szemben:

olvashatóság: Az osztályösszetevők megkönnyíthetik a kód megértését, különösen, ha sok állapot- vagy életciklus-módszerrel rendelkezik. A kód világosan meghatározott és könnyen megtalálható módszerekbe van rendezve.
Reus képesség: Az osztályösszetevők könnyebben újrafelhasználhatók, mert kibővíthetők új komponensek létrehozására. Ez különösen akkor lehet hasznos, ha sok megosztott funkció van az összetevők között.
Szervezet: Az osztályösszetevők megkönnyíthetik a kód rendszerezését, mivel a kapcsolódó metódusokat ugyanabban az összetevőben csoportosíthatja. Ez megkönnyítheti a kód megtalálását és karbantartását.

Van néhány oka annak, hogy miért érdemes az írás mellett dönteni funkcionális alkatrészek:

When you don’t need to use state or lifecycle methods: If you don’t need to use state or lifecycle methods, then a functional component is a good choice, because it is simpler and easier to read and write than a class component.
When you need a pure component: Functional components are “pure” components, meaning that they only depend on their props and do not have their own state. This can be useful if you want to ensure that a component re-renders only when its props change.
Ha optimalizálni szeretné a teljesítményt: Mivel a funkcionális összetevők tiszták, a React segítségével könnyebben optimalizálhatók, ami jobb teljesítményt eredményezhet.
Ha tömör, könnyen olvasható kódot szeretne írni: Mivel a funkcionális összetevők egyszerűbbek és kevesebb mozgó alkatrészt tartalmaznak, könnyebben olvashatóak és megérthetők, különösen akkor, ha az alkalmazásban sok összetevő van.

általában funkcionális komponenseket kell használnod, kivéve, ha olyan konkrét igényed van, amelyet csak egy osztálykomponenssel lehet kielégíteni.

useEffect & useState

However, it’s important to note that you can use state and lifecycle methods in functional components as well, using the useState és a useEffect horgok. Általában azt az összetevőtípust kell kiválasztania, amelyik a legésszerűbb az Ön igényeinek, és ez teszi a kódot a legkönnyebben olvashatóvá és érthetővé.

Ha továbbra is szeretne állapot- vagy életciklus-eseményeket megvalósítani, akkor lehetősége lesz horgok használatával engedélyezni az összetevőt.

Így valósítanád meg useEffect és a useState funkcionális összetevőiben

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> );
}

Itt van egy komponensünk, amely nyomon követi a számlálást, és megjeleníti az aktuális számlálást a felhasználó számára. A komponens a useState horog a funkcionális komponens állapotának hozzáadásához, és a useEffect horog egy művelet végrehajtásához (a dokumentum címének frissítése), amikor a szám megváltozik.

Kulcs elvezetések

Ezek a fő szempontok, amikor a React osztályösszetevői és funkcionális összetevői között kell választani:

Az osztályösszetevők a React.Component osztályt kiterjesztő osztály segítségével határozhatók meg, és több lehetőségük van az állapot- és életciklus-események kezelésére.
A funkcionális összetevők csak JavaScript-függvények, amelyek egy React elemet adnak vissza, és egyszerűbbek és könnyebben olvashatók és írhatók.
Funkcionális összetevőket kell használnia, kivéve, ha olyan szolgáltatást kell használnia, amely csak osztályösszetevőkben érhető el, például állapot- vagy életciklus-metódusokat.
A useState és a useEffect hook segítségével állapotot adhat hozzá, és mellékhatásokat hajthat végre a funkcionális összetevőkben.
Összességében az osztályösszetevők és a funkcionális összetevők közötti választás attól függ, hogy mi felel meg a legjobban az Ön igényeinek, és mi teszi a kódot a legkönnyebben olvashatóvá és érthetővé.

Remélem, ez a rövid magyarázat segíteni fog neked. Ha szeretnél mentorálást vagy bármilyen útmutatást a javascript elsajátításához, reagáláshoz vagy általában a webfejlesztéshez, fordulj hozzám egy 1:1-es foglalkozásért.