Sobes.tech
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
}