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:
- Używanie klasy
React.PureComponent
:
class MyComponent extends React.PureComponent { render() { return <div>{this.props.value}</div>; } }
- Używanie komponentów funkcyjnych z
React.memo
:
const MyComponent = React.memo(function MyComponent(props) { return <div>{props.value}</div>; });
Zalety czystego komponentu:
- Optymalizacja wydajności: Pure Component zapobiega niepotrzebnym renderowaniom, co może zwiększyć wydajność aplikacji.
- Prostszy kod: Użycie Pure Component upraszcza kod, eliminując potrzebę ręcznego implementowania
shouldComponentUpdate
. - 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ń.