Mis vahe on propsil ja olekul Reactis?

Propid (props) ja seisund (state) on kaks peamist mehhanismi andmete haldamiseks Reacti komponentides.

Propid:

• edastatakse vanemkomponentilt lapsekomponentile.
• on lapsekomponenti sees muutumatud (immutable).
• võimaldavad komponentidel omavahel suhelda.
• määravad välimuse või käitumise sisendandmete põhjal.

Seisund:

• kuulub konkreetsele komponendile ja seda hallatakse selle poolt.
• on muutuv (mutable) komponendi sees.
• esindab andmeid, mis võivad aja jooksul muutuda ja mõjutada komponendi renderdamist.
• seisundi muutmine põhjustab komponendi ja selle järglaste uuesti renderdamise.

Peamised erinevused on esitatud tabelina:

Omadus	Propid	Seisund
Allikas	Vanemkomponent	Oma komponent
Muutuvus	Muutumatu (immutable)	Muutuv (mutable)
Juhtimine	Edastatakse väljastpoolt	Hallatakse komponendi sees
Otstarve	Andmete kuvamine väljastpoolt, seadistamine	Komponendi sisemise seisundi juhtimine
Muutmine põhjustab	Uuesti renderdamise vanemal muutudes	Uuesti renderdamise käigus muutudes selles komponendis

Näide propide kasutamisest:

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

function ParentComponent() {
  const message = "Tere vanemalt!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Prop "text" edastamine */}
    </div>
  );
}

export default ParentComponent;

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

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

export default ChildComponent;

Näide seisundi kasutamisest:

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

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

  const increment = () => {
    setCount(count + 1); // Seisundi muutmine
  };

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

export default Counter;