Jaký je rozdíl mezi props a stavem v Reactu?

Props (vlastnosti) a stav (state) jsou dva klíčové mechanismy pro správu dat v komponentách React.

Props:

• Jsou předávány z rodičovské komponenty do dětské.
• Jsou vnitřně v dětské komponentě neměnné (immutable).
• Umožňují vzájemnou interakci mezi komponentami.
• Určují vzhled nebo chování komponenty na základě vstupních dat.

Stav:

• Patří konkrétní komponentě a je jím řízen.
• Je měnitelný (mutable) uvnitř komponenty.
• Reprezentuje data, která se mohou časem měnit a ovlivňovat renderování komponenty.
• Změna stavu způsobí znovu vykreslení (re-render) komponenty a jejích potomků.

Hlavní rozdíly lze představit ve formě tabulky:

Charakteristika	Props	Stav
Zdroj	Rodičovská komponenta	Stejná komponenta
Změnitelnost	Neměnné (immutable)	Měnitelné (mutable)
Řízení	Předává se zvenčí	Řídí se uvnitř komponenty
Účel	Zobrazení vnějších dat, konfigurace	Řízení vnitřního stavu
Změna způsobí	Překreslení při změně v rodiči	Překreslení při změně v aktuální komponentě

Příklad použití props:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Ahoj od rodiče!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Předání props "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Použití props "text" */}
  );
}

export default ChildComponent;

Příklad použití stavu:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Inicializace stavu "count"

  const increment = () => {
    setCount(count + 1); // Změna stavu
  };

  return (
    <div>
      <p>Čítač: {count}</p>
      <button onClick={increment}>Zvýšit</button>
    </div>
  );
}

export default Counter;