Dokonywanie wyboru pomiędzy komponentami klasowymi a komponentami funkcjonalnymi w React

Opublikowane ponownie przez Plato

Obserwuje: 0

Dokonywanie wyboru pomiędzy komponentami klasowymi a komponentami funkcjonalnymi w React PlatoBlockchain Data Intelligence. Wyszukiwanie pionowe. AI.

Podstawowe różnice

W React komponent to fragment kodu reprezentujący część interfejsu użytkownika. W React istnieją dwa główne typy komponentów: komponenty klasowe i komponenty funkcjonalne.

Komponenty klasy są definiowane przy użyciu klasy będącej rozszerzeniem klasy React.Component. Są bogatsze w funkcje i mają więcej opcji obsługi zdarzeń dotyczących stanu i cyklu życia. Tak wygląda komponent klasy:

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

Komponenty funkcjonalne to po prostu funkcje JavaScript, które zwracają element React. Są prostsze niż komponenty klasy i łatwiejsze do czytania i pisania. Oto ten sam komponent co powyżej, zapisany jako komponent funkcjonalny:

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

Kiedy czego użyć

Ogólnie rzecz biorąc, należy używać komponentów funkcjonalnych, chyba że konieczne jest użycie funkcji dostępnej tylko w komponentach klasy, takiej jak metody stanu lub cyklu życia.
Jest parę Przyczyny dlaczego wolisz używanie komponentów klasy zamiast komponentów funkcjonalnych:

czytelność: Komponenty klasy mogą ułatwić zrozumienie kodu, zwłaszcza jeśli masz wiele metod stanu lub cyklu życia. Kod jest zorganizowany w metody, które są jasno zdefiniowane i łatwe do znalezienia.
Wielokrotny użytek: Komponenty klasy można łatwiej wykorzystać ponownie, ponieważ można je rozszerzać w celu tworzenia nowych komponentów. Może to być szczególnie przydatne, jeśli masz wiele wspólnych funkcji między komponentami.
Organizacja: Komponenty klasy mogą ułatwić organizację kodu, ponieważ w tym samym komponencie można zgrupować powiązane metody. Może to ułatwić znalezienie i utrzymanie kodu.

Jest też kilka powodów, dla których warto zdecydować się na pisanie funkcjonalne komponenty:

Kiedy nie musisz używać metod stanu ani metod cyklu życia: Jeśli nie potrzebujesz używać metod stanu ani metod cyklu życia, dobrym wyborem jest komponent funkcjonalny, ponieważ jest prostszy i łatwiejszy do odczytania i zapisania niż komponent klasowy.
Kiedy potrzebujesz czystego komponentu: Komponenty funkcjonalne są „czystymi” komponentami, co oznacza, że zależą tylko od swoich rekwizytów i nie mają własnego stanu. Może to być przydatne, jeśli chcesz mieć pewność, że komponent będzie renderowany ponownie tylko wtedy, gdy zmienią się jego rekwizyty.
Gdy chcesz zoptymalizować wydajność: ponieważ komponenty funkcjonalne są czyste, React może je łatwiej zoptymalizować, co może skutkować lepszą wydajnością.
Gdy chcesz napisać zwięzły, łatwy do odczytania kod: ponieważ komponenty funkcjonalne są prostsze i mają mniej ruchomych części, mogą być łatwiejsze do odczytania i zrozumienia, zwłaszcza jeśli masz wiele komponentów w swojej aplikacji.

ogólnie rzecz biorąc, powinieneś używać komponentów funkcjonalnych, chyba że masz konkretną potrzebę, którą można zaspokoić tylko za pomocą komponentu klasowego.

useEffect & useState

Należy jednak pamiętać, że metod stanu i cyklu życia można używać również w komponentach funkcjonalnych, używając metody stan użycia i użyjEfekt haki. Ogólnie rzecz biorąc, powinieneś wybrać typ komponentu, który najlepiej odpowiada Twoim potrzebom i który sprawi, że Twój kod będzie najłatwiejszy do odczytania i zrozumienia.

Jeśli nadal chcesz zaimplementować zdarzenia stanu lub cyklu życia, będziesz mieć możliwość użycia haków, aby włączyć swój komponent.

W ten sposób byś to zrealizował użyjEfekt i stan użycia wewnątrz komponentów funkcjonalnych

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

Tutaj mamy komponent, który śledzi liczbę i wyświetla aktualną liczbę użytkownikowi. Komponent wykorzystuje stan użycia hook, aby dodać stan do komponentu funkcjonalnego, oraz użyjEfekt hook, aby wykonać akcję (aktualizację tytułu dokumentu), gdy zmieni się liczba.

Na wynos

Oto główne zasady wyboru między komponentami klasowymi a komponentami funkcjonalnymi w React:

Komponenty klasy są definiowane przy użyciu klasy, która rozszerza klasę React.Component i mają więcej opcji obsługi zdarzeń związanych ze stanem i cyklem życia.
Komponenty funkcjonalne to po prostu funkcje JavaScript, które zwracają element React i są prostsze oraz łatwiejsze do czytania i pisania.
Powinieneś używać komponentów funkcjonalnych, chyba że musisz użyć funkcji dostępnej tylko w komponentach klasy, takiej jak metody stanu lub cyklu życia.
Możesz użyć haków useState i useEffect, aby dodać stan i wykonać efekty uboczne w komponentach funkcjonalnych.
Ogólnie rzecz biorąc, wybór między komponentami klasy a komponentami funkcjonalnymi sprowadza się do tego, co najlepiej odpowiada Twoim potrzebom i co sprawia, że Twój kod jest najłatwiejszy do odczytania i zrozumienia.

Mam nadzieję, że to krótkie wyjaśnienie Ci pomoże. Jeśli potrzebujesz mentora lub jakichkolwiek wskazówek dotyczących Twojej ścieżki nauki javascript, reagowania lub ogólnie tworzenia stron internetowych, skontaktuj się ze mną na sesję 1:1.