Kuo skiriasi props ir būsena React?

Propai (props) ir būdas valdyti duomenis React komponentuose, taip pat būdas valdyti būseną (state).

Propai:

• perduodami iš tėvinio komponento į vaikų komponentą.
• yra nekintami (immutable) vaikų komponento viduje.
• leidžia komponentams sąveikauti tarpusavyje.
• apibrėžia išorės duomenų išvaizdą arba elgesį remiantis įvestais duomenimis.

Būsena:

• priklauso konkrečiam komponentui ir yra valdomas juo.
• yra keičiama (mutable) komponento viduje.
• atstovauja duomenis, kurie gali keistis laikui bėgant ir turėti įtakos komponento atvaizdavimui.
• būsenos keitimas sukelia komponento ir jo palikuonių perrėžimą.

Pagrindiniai skirtumai gali būti pateikti lentelės pavidalu:

Savybė	Propai	Būsena
Šaltinis	Tėvinis komponentas	Pats komponentas
Keičiamumas	Nekintami (immutable)	Keičiamas (mutable)
Valdymas	Perduodami iš išorės	Valdomi viduje komponento
Paskirtis	Išorės duomenų atvaizdavimas, nustatymai	Vidinio būsenos valdymas
Keitimas sukelia	Perkrovimą keičiant tėvą	Perkrovimą keičiant šiuo komponentu

Pavyzdys, kaip naudoti propus:

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

function ParentComponent() {
  const message = "Sveiki iš tėvo!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Prop "text" perdavimas */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Prop "text" naudojimas */}
  );
}

export default ChildComponent;

Pavyzdys, kaip naudoti būseną:

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

function Counter() {
  const [count, setCount] = useState(0); // Būsenos "count" inicializavimas

  const increment = () => {
    setCount(count + 1); // Būsenos keitimas
  };

  return (
    <div>
      <p>Skaitiklis: {count}</p>
      <button onClick={increment}>Padidinti</button>
    </div>
  );
}

export default Counter;