Mi a különbség a props és az állapot között a React-ben?

A props (tulajdonságok) és az állapot (state) két kulcsfontosságú mechanizmus a React komponensekben lévő adatok kezelésére.

Props:

• A szülő komponensből a gyermek komponensbe kerülnek át.
• A gyermek komponensen belül immutable (nem változtatható).
• Lehetővé teszik a komponensek közötti interakciót.
• A bemeneti adatok alapján határozzák meg a komponens megjelenését vagy viselkedését.

Állapot:

• Egy adott komponenshez tartozik, és azt a komponens kezeli.
• Mutable (változtatható) a komponensen belül.
• Olyan adatokat képvisel, amelyek idővel változhatnak, és befolyásolják a komponens renderelését.
• Az állapot változása újrarenderelést (re-render) vált ki a komponensben és annak leszármazottjaiban.

A fő különbségek táblázatban:

Jellemző	Props	Állapot
Forrás	Szülő komponens	A saját komponens
Változtathatóság	Immutable (nem változtatható)	Mutable (változtatható)
Kezelés	Külső forrásból átadva	A komponensen belül kezelve
Cél	Külső adatok megjelenítése, beállítások	A belső állapot kezelése
Változás hatására	Újrarenderelés a szülőben változás esetén	Újrarenderelés a jelenlegi komponensben változás esetén

Props példák:

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

function ParentComponent() {
  const message = "Szia az apától!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Props "text" átadása */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Props "text" használata */}
  );
}

export default ChildComponent;

Állapot példák:

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

function Counter() {
  const [count, setCount] = useState(0); // Az "count" állapot inicializálása

  const increment = () => {
    setCount(count + 1); // Állapot módosítása
  };

  return (
    <div>
      <p>Számláló: {count}</p>
      <button onClick={increment}>Növel</button>
    </div>
  );
}

export default Counter;