Junior
Czym są state i props w kontekście rozwoju React?
sobes.tech AI
Odpowiedź od AI
State — to wewnętrzny stan komponentu, zbiór danych, które mogą się zmieniać podczas działania komponentu. Zmiana stanu powoduje ponowne renderowanie komponentu.
Props — to zewnętrzne parametry przekazywane do komponentu spoza niego, od komponentu nadrzędnego. Props są niezmienne wewnątrz komponentu, który je otrzymuje. Służą do konfiguracji i przekazywania danych od rodzica do potomka.
Główne różnice:
| Charakterystyka | State | Props |
|---|---|---|
| Źródło | Wewnętrzne komponentu | Przekazywane spoza |
| Zmienność | Może się zmieniać | Nie można zmieniać wewnątrz |
| Cel | Zarządzanie widokiem wewnętrznym | Przekazywanie danych i konfiguracji |
Przykład użycia state:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // Inicjalizacja state
return (
<div>
<p>Licznik: {count}</p>
<button onClick={() => setCount(count + 1)}>Zwiększ</button>
</div>
);
}
Przykład użycia props:
import React from 'react';
function Greeting(props) {
return <h1>Witaj, {props.name}!</h1>; // Użycie props
}
function App() {
return <Greeting name="Świecie" />; // Przekazanie props
}