Kāda ir atšķirība starp props un stāvokli React?

Props (props) un stāvoklis (state) ir divi galvenie mehānismi datu pārvaldībai React komponentēs.

Props:

• tiek nodoti no vecāka uz bērnu komponentu.
• ir nemainīgi (immutable) bērna komponenta iekšienē.
• ļauj komponentēm savstarpēji sadarboties.
• nosaka ārējo izskatu vai uzvedību, pamatojoties uz ievadītajiem datiem.

Stāvoklis:

• pieder konkrētam komponentam un to pārvalda.
• ir maināms (mutable) komponenta iekšienē.
• attēlo datus, kas var mainīties laika gaitā un ietekmēt komponenta renderēšanu.
• stāvokļa izmaiņa izraisa komponenta un tā bērnu atkārtotu renderēšanu.

Galvenās atšķirības var attēlot tabulas formā:

Raksturlielums	Props	Stāvoklis
Avots	Vecāku komponenta	Pašas komponenta
Maināmība	Nemainīgs	Maināms
Pārvaldība	Tiek nodots no ārpuses	Pārvalda iekšpusē komponenta
Mērķis	Datu attēlošana no ārpuses, konfigurācija	iekšējā stāvokļa pārvaldība
Izmaiņas izraisa	Pārrenderēšanu, mainoties vecākam	Pārrenderēšanu, mainoties pašam komponentam

Prop piemērs:

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

function ParentComponent() {
  const message = "Sveiki no vecāka!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Prop "text" nododams */}
    </div>
  );
}

export default ParentComponent;

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

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

export default ChildComponent;

Stāvokļa piemērs:

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

function Counter() {
  const [count, setCount] = useState(0); // Stāvokļa inicializācija "count"

  const increment = () => {
    setCount(count + 1); // Stāvokļa maiņa
  };

  return (
    <div>
      <p>Skaitītājs: {count}</p>
      <button onClick={increment}>Palielināt</button>
    </div>
  );
}

export default Counter;