24. Czym jest komponent czysty (pure component) w React i jakie są jego zalety?

Komponent czysty (Pure Component) w React to komponent, który renderuje się tylko wtedy, gdy jego właściwości (props) lub stan (state) ulegną zmianie. Pure Component używa płytkiego porównania (shallow comparison) w metodzie shouldComponentUpdate, aby określić, czy konieczne jest ponowne renderowanie komponentu.

Tworzenie czystego komponentu:

  1. Używanie klasy React.PureComponent:
class MyComponent extends React.PureComponent { render() { return <div>{this.props.value}</div>; } }
  1. Używanie komponentów funkcyjnych z React.memo:
const MyComponent = React.memo(function MyComponent(props) { return <div>{props.value}</div>; });

Zalety czystego komponentu:

  1. Optymalizacja wydajności: Pure Component zapobiega niepotrzebnym renderowaniom, co może zwiększyć wydajność aplikacji.
  2. Prostszy kod: Użycie Pure Component upraszcza kod, eliminując potrzebę ręcznego implementowania shouldComponentUpdate.
  3. Deterministyczne renderowanie: Ponieważ Pure Component renderuje się tylko wtedy, gdy jego właściwości lub stan się zmieniają, zachowanie renderowania staje się bardziej przewidywalne.

Czyste komponenty są przydatne, gdy chcemy poprawić wydajność aplikacji React poprzez minimalizację liczby renderowań.

devFlipCards 2024

Akceptujesz cookies?

Cookies to niewielkie fragmenty danych zapisywane lokalnie na twoim urządzeniu. Pomagają w funkcjonowaniu naszej strony - zapisują Twoje ustawienia strony takie jak motyw czy język. Poprawiają funkcjonowanie reklam i pozwalają nam na przeprowadzanie analityki odwiedzin strony. Korzystając ze strony zgadasz się na ich wykorzystanie.